html5 template.js,templatejs使用总结

概述

template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题。看了很多相关的博客，博客内容几乎一样，很多知识点并没有详细的说明，对此经过两天的实验研究，把研究的结果记录下来。

模板标签

1.{{each}}:双标签，用于遍历对象，数组或者 json 对象。

2.{{if}}:双标签，用于数据类型的判断，条件可以是表达式。

3.{{else}}:单标签，配合 {{if}} 标签使用。

4.{{html}}:单标签，用于解析含有 html 片段的字符串。

5.{{tmpl}}:单标签，用于模板的嵌套。

6.{{wrap}}:双标签，包装器，(没有发现使用的奥秘，欢迎指点)

模板的常用变量和方法

有用的常量：

(1) ${var}:输出变量

(2) {{= var}}:输出变量,注意等号后面必须紧跟空格

(3) $item:表示当前模板

(4) $data:表示数据源，即模板注入的数据

(5) $index:表示在使用 each 时的索引

(6) $value:表示在使用 each 时的键值

方法：

(1) $.tamplate(name,str):将指定的html代码段转化成指定名称的模板,name模板名称,str代码片段,

并将数据缓存。

(2) $.tmpl(name,data):核心方法，将数据注入模板,并解析模板,name模板名称,data：数据源

(3) $.tmplItem(ele):获取使用模板渲染的指定元素上的数据,ele表示DOM节点

(4) $(ele).tmpl(data):局部方法,获取模板,向模板中注入数据,并解析模板

(5) $(ele).tmplItem():获取使用模板渲染的指定元素上的数据,ele表示DOM节点

(6) $(ele).template(name):将数据缓存在ele节点，缓存的key为name

看源码发现局部方法最终调用的是全局的方法，所以在全局的方法是template.js的核心，局部方法只是辅助

功能，为用户提供更灵活的方式获取模板，为模板注入数据，解析模板。

标签的使用

{{each}}

标签为双标签，使用时必须使用{{/each}}标签结束，在使用时需要注意一下几点：

(1) 在数据源为数组时，并不需要使用这个标签，模板会自动遍历数组。

(2)

使用方式一：

{{each array|jsonObject}}，将数组或json对象放在标签名称的后面，

实现的遍历方式，与 jquery 中的全局方法 $.each() 相同。源码中也是通过 $.each() 实现的。

使用这种方式，需要使用模板变量 $index 表示索引，$value 表示索引值。

使用方式二：

{{each(key,value) array|jsonObject}},使用此方式与方式一基本相同，唯一不同的是，

此时指定了遍历时的 key 和 value取代了模板变量 $index 和 $value，

同时不能使用 $index和 $value。

(3) 需要注意的是，数据源的问题，若果使用的不是数组，而是复杂的数据类型，可以使用模板嵌套的方式，

解析数据类型为数组的键值，这样就避免了多次使用each标签。

{{if}}

标签为双标签，使用时必须使用{{/if}}标签结束，使用方法：

(1) {{if condition}} : condition 为条件表达式，和普通if基本相同。

(2) 在逻辑判断时配合{{else}}使用，所有的{{else}}标签必须包含在{{if}}{{/if}}内。

{{html}}

{{tmpl}}

{{wrap}}