一、官网
(artTemplate){https://aui.github.io/art-template/}
(artTemplate 简洁语法版){https://github.com/aui/art-template/wiki/syntax:simple}
二、特别好的博客地址
(artTemplate教程){http://www.cnblogs.com/hihtml5/p/6286810.html?utm_source=itdadao&utm_medium=referral}
三、使用方法
第一步.引入arttemplate.js文件。
第二步:
<script type="text/html" id="dataList">
</script>
第三步:
$(template("dataList", data)
a.说明:返回jquery对象。
b.dataList必须是和script中的id一致。
c.data是给模板传递的数据。必须是json数据。
-
应用场景一: {{#变量名}}
某次遇到一个巨坑,就是服务器端下发数据为一段html代码。
搜索关键字:artTemplate中{{}}字符串
历程:
晚上在家绞尽脑汁想如何把字符串内部的html字符串转换为html标签。
<>====> <>
反思:
要搜插件相关内容。要知道插件这么多人用,肯定有人会遇到这个问题,然后被插件给解决掉的。
插件自己是很人性化的。不然哪来这么多人用。
第二种思路不是百度,而是在自己的SVN库中想有没有用到同一个逻辑的地方,然后套用即可。
最终解决方案:
输出表达式
对内容编码输出:
{{content}}
不编码输出:
{{#content}}
编码输出可以防止数据中含有 HTML 字符串(数据原样输出),避免引起 XSS 攻击。不编码输出含有html标签的元素将被浏览器解析为html元素
应用场景二:
想针对变量本身。在模板中直接执行函数。然后返回新的变量值。
应用场景三:
问题:提供的data数据直接是data map类型。那么如何直接进行
即:
var data=[{},{}]
var data=[{"name":"LiLi","age":12},{"name":"HanMeiMei","age":13},2];
$('#app').append($(template("dataList", data)));
解答:
用{{$data}}
<script type="text/html" id="dataList">
{{each $data as data}}
{{data}}
<div>data["name"]:{{data["name"]}}</div>
<div>data.name:{{data.name}}</div>
<div>data["age"]:{{data["age"]}}</div>
<div>data.age:{{data.age}}</div>
<div>$index:{{$index}}</div>
<div>value:{{value}}</div>
<div>$value:{{$value}}</div>
<hr>
{{/each}}
</script>
注意:
1.$data必须是$data 因为each中循环体默认是$data
。
2.each必须as一个变量。
3.data.name或者是data[""]必须加引号
4.data中的数据如果是对象的话。在页面上面会是空的。
5.index如果没有指代的话,默认是$index
value如果没有指代的话,默认是$value
<script type="text/html" id="dataList">
{{each $data}}
<div>{{$value}}</div>
<div>{{$index}}</div>
<hr>
{{/each}}
</script>
结果:
应用场景3:添加辅助方法,作用于模板中。
template.helper(name, callback)
name方法名,callback回调函数。
//js代码中声明一个辅助函数
template.helper('hi', function(name,age){
console.log('你好! 我叫'+name);
console.log('我今年'+age+'岁');
//注意最后一定要返回一个结果给视图,否则这函数就没多大意义了
return 'result';
})
一个参数:{{value |hi:23}}
二个参数:{{value | hi:'value1','value2'..}}
参数顺序value是第一个参数,value1是第二个参数,value2是第三个参数..
注意:执行顺序必须在template(id,data)之前。因为在template中注册了方法之后,才能在template(id,data)中使用
不然会报错
应用场景三:
var data={"dataList":[{}.{}]}
前台:
{{each $data.dataList as data}}
{{/each}}
说明:data直接是json类型的话。在页面上面可以直接dataList
或者是$data.dataList