生成自定义结构

Handlebars.registerHelper('nav', function(o) {  
  return new Handlebars.SafeString(
    "<a href='" + o.url + "'>" + o.title + "</a>"
  );
});

var obj = {
	nav: [
		{ title: '首页', url: '/' }
		, { title: '文档', url: '/started.html' }
		, { title: 'JS插件', url: '/javascript.html' }
	]
}

var htmlTemplate = '<nav class="nav">\
			    {{#each nav}}\
				    {{nav this}}\
			    {{/each}}\
		    </nav>';

var template = Handlebars.compile( htmlTemplate );

console.log( template( obj ) );

// 返回结构如下
/*
<nav class="nav">
    <a href="/">首页</a>
    <a href="/started.html">组件</a>
    <a href="/javascript.html">JS插件</a>
 </nav>
*/

nav是自定义的注册的名字,o是传的参数,可根据参数定制化逻辑,可设置多个参数。

Handlebars.SafeString是内置方法,避免 html 结构自己转码。