Template7 - 创建自定义的的模板助手（用于自动生成代码块）
作者：hangge | 2016-09-10 09:30
使用 Template7.registerHelper() 我们可以事先创建一些模板助手（自定义表达式），以后在页面中直接使用这个自定义的 Helper 就能自动生成相应的代码块。下面以通过自定义 Helper 来生成并显示一个链接列表为例说明。
2，假设上下文数据如下
3，html页面使用这个自定义的helper
4，最终自动生成的完整代码块如下
1，定义一个模板助手
根据参数生成响应的链接代码块。
Template7.registerHelper('link', function (url, title, options){
var ret = '<li>' +
'<a href="' + url + '" class="item-content item-link" ' +
'target="' + options.hash.target + '">' +
'<div class="item-inner">' +
'<div class="item-title">' + title + '</div>' +
'</div>' +
'</a>' +
'</li>';
return ret;
});
2，假设上下文数据如下
{
links: [
{
url: 'http://hangge.com',
title: 'hangge.com'
},
{
url: 'http://google.com',
title: 'google.com'
},
]
}
3，html页面使用这个自定义的helper
<div class="list-block">
<ul>
{{#each links}}
{{link url title target="_blank"}}
{{/each}}
</ul>
</div>
4，最终自动生成的完整代码块如下
<div class="list-block">
<ul>
<li>
<a href="http://hangge.com" target="_blank" class="item-link item-content">
<div class="item-inner">
<div class="item-title">hangge.com</div>
</div>
</a>
</li>
<li>
<a href="http://google.com" target="_blank" class="item-link item-content">
<div class="item-inner">
<div class="item-title">google.com</div>
</div>
</a>
</li>
</ul>
</div>
全部评论（0）