StuPig/handlebar_partials.html

## handlebar_partials.html
<!DOCTYPE html>
<html>
  <head>
    <title>Handlebars Partials Example</title>
  </head>
  <body>
    <h1>Handlebars Partials Example!</h1>

    <div id="list">
    </div>

    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

    <script id="people-template" type="text/x-handlebars-template">
      {{#each people}}
        {{> person}}
      {{/each}}
    </script>

    <script id="person-partial" type="text/x-handlebars-template">
      <div class="person">
        <h2>{{first_name}} {{last_name}}</h2>
        <div class="phone">{{phone}}</div>
        <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
        <div class="since">User since {{member_since}}</div>
      </div>
    </script>

    <script type="text/javascript">
      $(document).ready(function() {

        // compile our template
        var template = Handlebars.compile($("#people-template").html());

        // add the person partial
        Handlebars.registerPartial("person", $("#person-partial").html());

        var data = {
          people: [
            { first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
          ]
        };

        $('#list').html(template(data));
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Handlebars Partials Example</title>
	</head>
	<body>
	<h1>Handlebars Partials Example!</h1>

	<div id="list">
	</div>

	<script type="text/javascript" src="script/jquery.js"></script>
	<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>

	<script id="people-template" type="text/x-handlebars-template">
	{{#each people}}
	{{> person}}
	{{/each}}
	</script>

	<script id="person-partial" type="text/x-handlebars-template">
	<div class="person">
	<h2>{{first_name}} {{last_name}}</h2>
	<div class="phone">{{phone}}</div>
	<div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
	<div class="since">User since {{member_since}}</div>
	</div>
	</script>

	<script type="text/javascript">
	$(document).ready(function() {

	// compile our template
	var template = Handlebars.compile($("#people-template").html());

	// add the person partial
	Handlebars.registerPartial("person", $("#person-partial").html());

	var data = {
	people: [
	{ first_name: "Alan", last_name: "Johnson", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
	{ first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
	{ first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
	{ first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
	{ first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
	]
	};

	$('#list').html(template(data));
	});
	</script>
	</body>
	</html>