template.js 用法

html 模板 artTemplate.js

一、官网

(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数据。

1. 应用场景一： {{#变量名}}

   某次遇到一个巨坑，就是服务器端下发数据为一段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>
        
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>
        
{{$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