Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.
1. 添加jquery和handlebars脚本
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="handlebars.js"></script>
2. 简单封装Handlebars调用,并添加自定义Helper的扩展,让each支持index (#list)
<script type="text/javascript">
if (typeof(Handlebars) != 'undefined') {
// {{#list objectlist base="1"}} .. {{_index_}} .. {{/list}}
Handlebars.registerHelper("list", function(context, options) {
var fn = options.fn, inverse = options.inverse;
var ret = "", data;
var baseIndex = 1;
if (options.hash.base) {
baseIndex = parseInt(options.hash.base, 10);
}
if (context && context.length > 0) {
for(var i=0, j=context.length; i<j; i++) {
context[i]["_index_"] = i + baseIndex;
ret = ret + fn(context[i]);
}
} else {
ret = inverse(this);
}
return ret;
});
$.fn.applyTemplate = function(source, context) {
var template = Handlebars.compile($(source).html());
var output = template(context);
this.html(output);
};
}
</script>
模板范例:
<script type="text/x-handlebars" id="template_name">
<table border="0" width="100%">
<tr>
<td nowrap align="center"><b>Name</b></td>
<td nowrap align="center"><b>Value</b></td>
</tr>
{{#each items}}
<tr>
<td nowrap align="center"><b>{{name}}</b></td>
<td nowrap align="center"><b>{{value}}</b></td>
</tr>
{{/each}}
{{#unless items}}
<tr>
<td colspan="2"><font color="red" size="2"><i>NO ITEMS</i></font></td>
</tr>
{{/unless}}
</table>
</script>
代码调用:
<script type="text/javascript">
var template = '#template_name';
var data = {items: [{name: "abc", value: 123}, {name: "def", value: 234}]};
$('#target').applyTemplate(template, data);
</script>