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的核心，局部方法只是辅助
功能，为用户提供更灵活的方式获取模板，为模板注入数据，解析模板。

标签的使用

1. {{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标签。

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

      (1) {{if condition}} : condition 为条件表达式，和普通if基本相同。
      (2) 在逻辑判断时配合{{else}}使用，所有的{{else}}标签必须包含在{{if}}{{/if}}内。
     

3. {{html}}
4. {{tmpl}}

5. {{wrap}}