Skip to content

Instantly share code, notes, and snippets.

@joshsusser

joshsusser/example.html

Created October 18, 2010 07:47
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshsusser/631887 to your computer and use it in GitHub Desktop.
Save joshsusser/631887 to your computer and use it in GitHub Desktop.
Download ZIP
I like this approach to putting mustache/handlebars templates in script tag sections. Reads much easier than assembling them from strings in JavaScript.
Raw
example.html
<!DOCTYPE HTML>
<html>
<head>
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/handlebars.js" type="text/javascript"></script>
<script id="main" type="text/html">
<ul>
{{#people}}
<li>{{> link}}</li>
{{/people}}
</ul>
</script>
<script id="link" type="text/html">
<a href="/people/{{id}}">{{name}}</a>
</script>
<script type="text/javascript">
$(document).ready(function() {
var main = $("#main").html();
var partials = { "link": $("#link").html() };
var template = Handlebars.compile(main);
var data = { "people": [
{ "name": "Alan", "id": 1 },
{ "name": "Yehuda", "id": 2 }
]};
$("body").html( template(data, { "partials": partials }) );
});
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment