Created
December 16, 2012 07:15
-
-
Save StuPig/4303989 to your computer and use it in GitHub Desktop.
handlebars partials demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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: "[email protected]", member_since: "Mar 25, 2011" }, | |
{ first_name: "Allison", last_name: "House", phone: "0987654321", email: "[email protected]", member_since: "Jan 13, 2011" }, | |
{ first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "[email protected]", member_since: "Apr 9, 2009" }, | |
{ first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "[email protected]", member_since: "May 21, 2010" }, | |
{ first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "[email protected]", member_since: "Nov 1, 2008" } | |
] | |
}; | |
$('#list').html(template(data)); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment