<script id="node">
<h1>{{title}}</h1>
<div>
{{#foo accountList}}
<h2>{{ name }}</h2>
<div>{{ desc }}</div>
{{/foo}}
</div>
</script>
<div id="container">
</div>Handlebars.registerHelper('foo', function(list, options){
console.info(list);
var itemArray = list.map(function(item){
// 这里的fn已经使用了包裹的助手代码块html标签编译的template函数
return '<li>' + options.fn(item) + '</li>';
});
return '<ul>' + itemArray.join(' ') + '</ul>';
});
var source = $("#node").html();
var template = Handlebars.compile(source);
var context = {
title: "我是包裹的块助手代码参数标题" ,
accountList: [
{
name: '小红',
desc: '小红的描述'
},
{
name: '小绿',
desc: '小绿的描述'
},
{
name: '小黄',
desc: '小黄的描述'
}
]
};
var html = template(context);
$('#container').html(html);
External CSS
This Pen doesn't use any external CSS resources.