template.js小白入门篇

1.刚接触template.js记录一下，首先放大招

art-template.js官网：https://aui.github.io/art-template/                可参考：http://www.jq22.com/jquery-info1097

 

2.接下来我们看一下这个到底是怎么用？

首先template引入的包有两种，刚开始看到网上介绍的都是{{ }}以这种占位符编写，刚开始还以为是vue到此，结果尴尬了。

经过网上查找和自己尝试，发现（我的包名和你们的不一定一样！！）：

template.js包不支持简化写法；只能用<%  %>  

template-web.js简洁发和原始语法都可以。

那么写的过程中注意的点：

1. <%for(var i = 0;i < items.length;i++){%>   for前面不加=
2. <%=items[i].name%>    输出内容前加=
3. template 的数据绑定方法：

   1. // template用下面方法 不支持{{}}简洁版

      var name = template(document.getElementById('tpl').innerHTML,data);

      document.getElementById('wp').innerHTML = name

4. template-web的数据绑定方法：

   1. // template用一下方法 支持简洁版

      var name = template('tpl',data);

      document.getElementById('wp').innerHTML = name

5. 对于绑定对象格式为 对象-数组-对象

6. template-web免费下载地址template-web下载

var data={
        items:[
            {'name':'张三','val':'河北人'},
            {'name':'myself','val':'西藏人'},
            {'name':'李四','val':'天津人'},
            {'name':'王五','val':'云南人'},
            {'name':'马六','val':'上海人'}
        ]
    }

只是初步接触还有许多不了解，听说很牛逼。附上整体代码：

在ajax下的写法：