wookiehangover/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
	<title>Templating Rocks!</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
  <script src="js/jquery.tmpl.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>

<div data-role="page" id="main">

	<div data-role="content">
		<a href="#" data-role="button" id="super-happy-template-link">Show me some templating</a>
	</div>
</div>

<div data-role="page" id="team-list">
  <div data-role="header">
    <h2>jQuery Team Members</h2>
  </div>

  <div data-role="content">
    <ul id="members-list" data-role="listview"></ul>
  </div>


  <script id="category-template" type="text/x-jquery-tmpl">
    {{if groups.length}}

      {{each groups}}
        <li data-catId="${id}">

          {{tmpl($value) '#category-content-template'}}

          {{if children}}
            <ul class="category-child" data-catId="${id}">
              {{each children}}
                <li data-catId="${id}">{{tmpl($value) '#category-content-template'}}</li>
              {{/each}}
            </ul>
          {{/if}}

        </li>
      {{/each}}

    {{else}}

      <li>No categories available.</li>

    {{/if}}
  </script>

  <script id="category-content-template" type="text/x-jquery-tmpl">
    <a href="#">${name}</a>
    {{if children}}
      <span class="ui-li-count">${children.length}</span>
    {{/if}}
  </script>

</div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Templating Rocks!</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
	<script src="js/jquery.tmpl.min.js"></script>
	<script src="js/script.js"></script>
	</head>
	<body>

	<div data-role="page" id="main">

	<div data-role="content">
	<a href="#" data-role="button" id="super-happy-template-link">Show me some templating</a>
	</div>
	</div>

	<div data-role="page" id="team-list">
	<div data-role="header">
	<h2>jQuery Team Members</h2>
	</div>

	<div data-role="content">
	<ul id="members-list" data-role="listview"></ul>
	</div>


	<script id="category-template" type="text/x-jquery-tmpl">
	{{if groups.length}}

	{{each groups}}
	<li data-catId="${id}">

	{{tmpl($value) '#category-content-template'}}

	{{if children}}
	<ul class="category-child" data-catId="${id}">
	{{each children}}
	<li data-catId="${id}">{{tmpl($value) '#category-content-template'}}</li>
	{{/each}}
	</ul>
	{{/if}}

	</li>
	{{/each}}

	{{else}}

	<li>No categories available.</li>

	{{/if}}
	</script>

	<script id="category-content-template" type="text/x-jquery-tmpl">
	<a href="#">${name}</a>
	{{if children}}
	<span class="ui-li-count">${children.length}</span>
	{{/if}}
	</script>

	</div>

	</body>
	</html>