|
doT.js可以把从数据库取出来的数据，按次序，动态的添加到页面中，可以说是我们写下拉页面的神器。 首先我们要引入一个srcipt文件。 <script type="text/javascript" src="../script/doT.min.js"></script> 如果没有的话，官方网站有相关出处。 下面将一下用法：
{{= }}为赋值语句，用两个大括号是他自己的语法，这个我们更改不了。 <div id="list"></div> <script id="'template" type="text/template">// 这里的template可以随便写，只要不是srcipt之类的就可以。
<div>{{=it.name}}</div> 将这条记录的name值复制给div
<div>{{=it.age}}</div> 将这条记录的年龄赋值给div
</script> 这里的it 也是规定的，可以理解为一条记录。 list = $api.byId('list'); 得到id为list的div，准备向里面添加东西，必须先声明此方法
var templateText = $api.byId('template').innerHTML;将模板的内容取出
var dot = doT.template(templateText);将模板初始化 如果此时有数据源名为res, list.innerHTML = dot(res); 即可以将数据写入到div中
那我们如果循环写入呢，我们可以加上一个循环体for 也可以使用~. 同样我们在'template'中添加一个。it的意思也是一条数据，这里可以看出，it是一个数组问不是一个变量。 <div id="list"></div> <script id="'template" type="text/template">
{{ for ( var i = 0 ; i <= it.length ; i++ ) { }}
<div>{{ =it.name }}</div>
<div>{{ =it.age }}</div>
{{ } }}
</script>
list = $api.byId('list');
var templateText = $api.byId('template').innerHTML;
var dot = doT.template(templateText); list.innerHTML = dot(res);
这里的循环可以用下面的方法代替。
<div id="list"></div> <script id="'template" type="text/template">
{{~ it:data }} data是一个数组
<div>{{ =data.name }}</div>
<div>{{ =data.age }}</div>
{{~}}
</script>
list = $api.byId('list');
var templateText = $api.byId('template').innerHTML;
var dot = doT.template(templateText); list.innerHTML = dot(res); 还有就是条件的用法。
{{? }} if
{{?? }} else if
{{??}} else 请大家多多指教，有不对的地方请提出来！
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
这个应该有用，简单明了。