Skip to content

Instantly share code, notes, and snippets.

@pste

pste/handlebars-template.html

Last active June 12, 2017 08:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pste/92901a0bd921500e073f5244393ecd18 to your computer and use it in GitHub Desktop.
Save pste/92901a0bd921500e073f5244393ecd18 to your computer and use it in GitHub Desktop.
Download ZIP
Handlebars template
Raw
handlebars-template.html
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main">
<script type="text/x-handlebars-template">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{{#each .}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
</div>
<script>
var items = [
{name: "enzo", age:52},
{name: "beppe", age: 33},
{name: "ste", age: 41}
];
(function(data) {
var source = $('#main script').text(); // no html to avoid inner rendering
var template = Handlebars.compile(source.trim());
$('#main').html(template(data));
}(items))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment