自定义过滤

以下实例,判断strself.title的值是否一样。

如果一样,使用opt.fn(this)让逻辑执行第一个代码段。

如果不一样,使用opt.inverse(this)让逻辑执行{{else}}代码段。

Handlebars.registerHelper('filter', function(self, str, opt) {
	if( self.title == str ){
		return opt.fn(this);
	}else{
		return opt.inverse(this);  
	}  
});

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

var htmlTemplate = '<nav class="nav">\
				{{#each nav}}\
					{{#filter this "首页"}}\
						<a href="{{url}}" class="is-active">{{title}}</a>\
					{{else}}\
						<a href="{{url}}">{{title}}</a>\
					{{/filter}}\
				{{/each}}\
		    </nav>';

var template = Handlebars.compile( htmlTemplate );

console.log( template( obj ) );

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