doT来了
来源:互联网 发布:北京婚纱摄影口碑 知乎 编辑:程序博客网 时间:2024/05/16 14:39
涉及:
js,html,ajax交互,dom操作,属于前端开发
问题:
js拿到ajax数据后操纵dom对象表现出来,特别麻烦而且容易重复加载,并且需要考虑加载顺序,可移植性差
解决方案:
html里准备
当需要的时候触发doT
搞定!
免费派送:
定界符 {{}},习惯用这个
循环开始 {{~it :val}},it为总数据,如果遍历多维数组,可以这样{{~val.name :v}},其中val为上一层循环的子项
循环结束 {{~}}
变量占位 {{=xxx.xx}} 注意是“=”不是“~”,注意哦
if等语句
常规
if(a>3){ => {{if(a>3){}}
}else{ => {{}else{}}
} => {{}}}
就是这样用定界符包起来
使用感受:
比起以前操纵dom对象来省了很多时间,杜绝了重复加载问题,不过注意一点,doT需要一点时间来拿到数据并不具,如果你的项目用的是模板成套UI,替换doT后可能会导致原UIjs特效消失,这个函数$.getScript('')可能会对你有帮助,不过我没试,以为我重写的特效
个人记录,仅供参考,没有最好,只有更好,欢迎拍砖,砸鸡蛋,多交流
js,html,ajax交互,dom操作,属于前端开发
问题:
js拿到ajax数据后操纵dom对象表现出来,特别麻烦而且容易重复加载,并且需要考虑加载顺序,可移植性差
解决方案:
引入doT,下载地址:(https://github.com/olado/doT)
返回数据
array([0]=>array('url'=>'http://www.baidu.com','item'=>'百度'),[1]=>array('url'=>'http://china.alibaba.com/','item'=>'阿里巴巴'),[2]=>array('url'=>'http://www.kingsoft.com/','item'=>'金山'),);
html里准备
<div id='menu'><script id='son_menu' type='text/doT'><dl>{{~it:val}}<dd><a href='{{=val.url}}'>{{=val.item}}</a></dd>{{~}}</dl></script></div>
js里准备
var son_menu=$('#son_menu');var son_menufn=doT.template(son_menu.html());
当需要的时候触发doT
$('#menu').html(son_menufn(data));
搞定!
免费派送:
定界符 {{}},习惯用这个
循环开始 {{~it :val}},it为总数据,如果遍历多维数组,可以这样{{~val.name :v}},其中val为上一层循环的子项
循环结束 {{~}}
变量占位 {{=xxx.xx}} 注意是“=”不是“~”,注意哦
if等语句
常规
if(a>3){ => {{if(a>3){}}
}else{ => {{}else{}}
} => {{}}}
就是这样用定界符包起来
使用感受:
比起以前操纵dom对象来省了很多时间,杜绝了重复加载问题,不过注意一点,doT需要一点时间来拿到数据并不具,如果你的项目用的是模板成套UI,替换doT后可能会导致原UIjs特效消失,这个函数$.getScript('')可能会对你有帮助,不过我没试,以为我重写的特效
个人记录,仅供参考,没有最好,只有更好,欢迎拍砖,砸鸡蛋,多交流
- doT来了
- Dot Net 我来了!
- 使用graphviz dot来画图表
- 【转】使用graphviz dot来画图表
- 结合Dot语言和工具graphviz来画图
- 查看是否安装了dot net,及其版本
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- 来了
- HDU 3715 Go Deeper(2-SAT + 二分判定)
- Android的shape美化
- 多态与虚函数
- 回调函数(callback Function)
- Codeforces Beta Round #65 (Div. 2)——A,B,C
- doT来了
- ubuntu12.04 下编译qt-4.6.0总结
- 设计模式之观察者(Observer)模式
- ArrayList、LinkedList、 Vector、Map 用法比较
- SSH框架在用ajax插入数据的时候报错
- Servlet技术和Servlet生命周期:
- 实例讲解虚拟机3种网络模式(桥接、nat、Host-only)
- __int64 与long long 的区别
- PE 47(Distinct primes factors-Python数组)