涉及:
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('')可能会对你有帮助,不过我没试,以为我重写的特效
个人记录,仅供参考,没有最好,只有更好,欢迎拍砖,砸鸡蛋,多交流