template.js 用法
来源:互联网 发布:mac向移动硬盘拷贝 编辑:程序博客网 时间:2024/06/06 06:44
一、官网
(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
- template.js 用法
- template用法
- template用法
- template.js
- template.js
- Template.js
- template.js
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- template 的用法
- Eclipse Template用法探讨
- Eclipse Template用法探讨
- template 的用法
- 对编辑器或蓝图公开属性(变量)和功能(函数)
- 感悟
- 《剑指offer》刷题笔记(字符串):表示数值的字符串
- 【智能金融】平安银行零售科技CTO:AI研发之路的「二三五」原则
- 【智能农业】杭州策望:面向农业的综合平台系统
- template.js 用法
- 基于注解的Spring MVC(上篇)
- iptables 笔记
- 表头排序 价格区间查询
- 【智能制造】如何运用数学进行高效生产?
- 基于Nginx负载均衡方案
- Cookie
- QT如何创建和使用Qt Plugins (插件)
- cache-control和pragma的区别