来源:http://idangero.us/template7/#.V2iXqJGF6Ul
测试用json数据:
var jsonData = { people: [ { firstName: 'John', lastName: 'Doe' }, { firstName: 'Mark', lastName: 'Johnson' }, ], title: "this is a test title", preKey: "full name" };
template7支持下面的语法:
变量:
{{title}}:输出当前上下文对象下的title字段
{{../title}}:输出当前上下文对象的父级对象下的title字段
{{../../title}}:输出当前上下文对象向上推两级的对象下的title字段
{{this}}:当前上下文对象
{{person.name}}:输出在当前上下文中的“人”变量的“名称”属性
{{../person.name}}:输出在当前上下文的 父级对象 中的“人”变量的“名称”属性
块表达式:
{{#each}} :循环开始
{{else}}:当数组无数据的时候执行
{{/each}}:结束循环
{{if}}:条件判断
{{else}}:不满足条件判断执行块
{{/if}}:结束
{{#each reverse="true"}} - begin of block expression with passed reverse:true hash arguments,暂没用过,也没翻译
编辑和渲染:
template7是全球可用的窗口函数。
首先,我们需要提供字符串模板。例如,我们可以存储在脚本标签中。
下面一个例子:每一步注释都写的很清楚了。
@*引入js*@ <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/Template7-1.1.0/src/template7.js"></script> <script> $(function () { //测试用json数据 var jsonData = { people: [ { firstName: 'John', lastName: 'Doe' }, { firstName: 'Mark', lastName: 'Johnson' }, ], title: "this is a test title", preKey: "full name" }; //获取模板 var template = $('#template').html(); // 编译模板 var compiledTemplate = Template7.compile(template); // 使用模板加载数据 var htmlStr = compiledTemplate(jsonData); //将得到的结果输出到指定区域 $("#contents").html(htmlStr); }); </script> @*模板的 type指定为 text/template7 *@ <script type="text/template7" id="template"> <p>{{title}}</p> <ul> {{#each people}} <li>{{../preKey}}:{{firstName}} {{lastName}}</li> {{/each}} </ul> </script> <div id="contents"></div>
内置函数:
{{join myArray delimiter=", "}}:把数组 myArray 的每个元素使用逗号“,”拼接到一起。只为数组
{{@index}}:在循环中,获得序号,从0开始。只为数组
@first:循环中的第一个项。只为数组
@last:循环中的最后一个项。只为数组
@key:当前对象属性的名称。只为对象
Template 模板 | Context 数据 | Output 输出 |
---|---|---|
Iterate through Array items 遍历数组项 | ||
|
|
|
|
|
|
Iterate through Object properties | ||
|
|
|
{{else}} expression. | ||
|
|
|
|
|
|
{#if}}...{{else}}...{{/if}}
Template 模板 | Context 数据 | Output 输出 |
---|---|---|
|
|
|
{{else}} expression. | ||
|
|
|
{{#unless}}...{{else}}...{{/unless}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
{{else}} expression. | ||
|
|
|
{{#with}}...{{/with}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
{{#variableName}}...{{/variableName}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
|
|
|
{{join delimiter=""}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
{{escape}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
{{js "expression"}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
{{#js_compare "expression"}}...{{/js_compare}}
Template -> | Context -> | Output |
---|---|---|
|
|
|
|
|
|
Using Custom Helpers,自定义函数
语法:
Template7.registerHelper(name, helper)
- name - string - helper name
- helper - function - helper function to handle passed context
Demo:
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; });
Template -> | Context -> | Output |
---|---|---|
|
|
|
注:自定义函数应在编译模板之前注册。
移除自定义函数:
Template7.unregisterHelper(name)
name - string - 函数名称
全局变量:
Template7.global = { os: 'iOS', browser: 'Chrome', username: 'johndoe', email: 'john@doe.com' };
访问数据根节点:
有时候我们在循环的时候需要用到根节点的数据,可以使用{{@root}}来达到目的:
{ persons: [ { name: 'John', hobby: ['Cars', 'Food'] }, { name: 'Kyle', hobby: ['Travel', 'Puzzles'] }, ], showHobby: true } {{#each persons}} <h2>{{name}}</h2> <h3>Hobby:</h3> {{#if @root.showHobby}} <ul> {{#each hobby}} <li>{{this}}</li> {{/each}} </ul> {{/if}} {{/each}}
部分模板:
创建:Template7.registerPartial(name, template) - register partial
name - string - partial name 模板名称
helper - string - partial template 模板内容
移除:Template7.unregisterPartial(name) - unregister partial
name - string - partial name 模板名称
调用方法:{{> "partialName"}}
原模板:
<ul class="users"> {{#each users}} {{> "user"}} {{/each}} </ul> <ul class="admins"> {{#each admins}} {{> "user"}} {{/each}} </ul>
注册部分模板:
Template7.registerPartial('user', '<li><h2>{{firstName}} {{lastName}}</h2><p>{{bio}}</p></li>');
应用模板数据:
{ users: [ { firstName: 'John', lastName: 'Doe', bio: 'Lorem ipsum dolor' }, { firstName: 'Jane', lastName: 'Doe', bio: 'Donec sodales euismod augue' } ], admins: [ { firstName: 'Mike', lastName: 'Doe', bio: 'Lorem ipsum dolor' }, { firstName: 'Kate', lastName: 'Doe', bio: 'Donec sodales euismod augue' } ] }
输出结果:
<ul class="users"> <li> <h2>John Doe</h2> <p>Lorem ipsum dolor</p> </li> <li> <h2>Jane Doe</h2> <p>Donec sodales euismod augue</p> </li> </ul> <ul class="admins"> <li> <h2>Mike Doe</h2> <p>Lorem ipsum dolor</p> </li> <li> <h2>Kate Doe</h2> <p>Donec sodales euismod augue</p> </li> </ul>
递归使用部分模板:
我们甚至可以递归使用部分模板,如嵌套的注释:
// Simple template with just a partial var template = '{{> "comments"}}' // Register partial Template7.registerPartial( 'comments', '<ul>' + '{{#each comments}}' + '<li>' + '<h2>{{author}}</h2>' + '<p>{{text}}</p>' + '{{#if comments}}{{> "comments"}}{{/if}}' + '</li>' + '{{/each}}' + '</ul>' ); // Compile template var compiledTemplate = Template7.compile(template); // Render template var output = compiledTemplate({ comments: [ { author: 'John Doe', text: 'Lorem ipsum dolor', comments: [ { author: 'Mike Doe', text: 'Aliquam erat volutpat' }, { author: 'Kate Doe', text: 'Donec eget fringilla turpis' } ] }, { author: 'Jane Doe', text: 'Donec sodales euismod augue' } ] })
输出结果:
<ul class="comments"> <li> <h2>John Doe</h2> <p>Lorem ipsum dolor</p> <ul class="comments"> <li> <h2>Mike Doe</h2> <p>Aliquam erat volutpat</p> </li> <li> <h2>Kate Doe</h2> <p>Donec eget fringilla turpis</p> </li> </ul> </li> <li> <h2>Jane Doe</h2> <p>Donec sodales euismod augue</p> </li> </ul>