handlebars: a power javascript template engine

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

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>