<script id="node" type="text/x-handlebars-template">
<ul>
{{#each itemList}}
{{> partialItem parentTitle=../parentTitle firstname=firstname lastname=lastname}}
{{/each}}
<ul>
</script>
<div id="container"></div>Handlebars.registerPartial('partialItem', '<li>{{parentTitle}}, {{firstname}}·{{lastname}}</li>');
var source = $("#node").html();
var template = Handlebars.compile(source);
var context = {
parentTitle: '我是公共的父标题',
itemList: [
{
fistname: 'Koby',
lastname: 'Bryant'
},
{
firstname: 'Michael',
lastname: 'Jordan'
}
]
};
var html = template(context);
$('#container').html(html);
External CSS
This Pen doesn't use any external CSS resources.