art-template 常用功能总结

art-template 通过模板的方式渲染数据，降低了在JQuery中频繁操作dom赋值的操作，在开发中，提高效率。
据官网介绍，art-template拥有接近 JavaScript 渲染极限的的性能。

以下是art-template 常用功能：
if判断，each循环，嵌套循环，管道数据转换方法，原样展示html片段设置。

• 准备：
  引入js template.js
  （官网现已是使用npm安装的方式了~）
  引入的 template.js及下面的示例demo，可以直接下载：
  https://download.csdn.net/download/dorothy1224/11126096

• 使用：

1. 普通表单用模板展示
   {{}}双括号内写变量名；
   js:

		var data1 = {'data':{'name':1}};//数据格式
        var html1 = template('demo1Tpl', data1.data);
        $('#demo1').html(html1);

html:

2. 循环数据

{{each data as val index}}
data：是json数据中key，value是个数组。
val：是自定义的变量名，类似for(var i in arr) 中的arr[i]；
index：循环的下标；

js:

        var data2 = {'data':[{'serviceName':'abc'},{'serviceName':'de'}]};//数据格式
        var html2 = template('demo2Tpl', data2);
        $('#demo2').html(html2);

html:

3. 多层嵌套循环数据
   在外层循环，同上；
   内部循环嵌套，用include引入内层循环的名字。
   {{include 'priceTpl' value}}
   priceTpl: 是内部循环嵌套模板的id；
   value：是传递给内部嵌套的参数；

js:

        var data3 = {'data':[{'serviceName':1,'serviceTypes':[{'price':1},{'price':2}]},{'serviceName':2,'serviceTypes':[{'price':3},{'price':4}]}]};//数据格式
        var html3 = template('demo3Tpl', data3);
        $('#demo3 tbody').html(html3);

html:

4. 使用管道过滤处理数据

• 一个参数：
  {{val.price | convertMoney}}
  默认值就是第一个参数；
  convertMoney：方法；
  |：竖线左右必须留一个空格；
  html：

        template.helper('convertMoney',function(price){
          return '¥'+price;
        });
        var data4 = {'val':{'price':999}};//数据格式
        var html4 = template('demo4Tpl', data4);
        $('#demo4').html(html4);

• 多参数：
  {{serviceType | convertServiceType:'a','b'}}
  convertServiceType：方法；
  serviceType ：第一个参数；
  serviceTypeIntro：第二个参数；
  num：第三个参数；
  【参数名自定义即可】
  html:

js:

        template.helper('convertServiceType',function(serviceType,param1,param2){
          return serviceType+':'+param1+','+param2;
        });
        var data5 = {'data':{'serviceType':'type'}};//数据格式
        var html5 = template('demo5Tpl', data5.data);
        $('#demo5').html(html5);

5. if判断/if嵌套
   {{if val == 1}}
{{/if}}
   和if语法类似，但要闭合。
   html：

js:

		var data6 = {'val':2};//数据格式
        var html6 = template('demo6Tpl', data6.val);
        $('#demo6').html(html6);

7. {{}}中的内容直接显示html片段
   默认显示是html转义后的内容，加上下面这句，直接输入html原文。
   template.config("escape", false);

• 附：
  art-template 的API 官网：
  http://aui.github.io/art-template/zh-cn/docs/syntax.html