doT.js 模板引擎的使用
来源:互联网 发布:受警醒明底线知敬畏 编辑:程序博客网 时间:2024/05/29 11:05
本文转自 http://www.fantxi.com/blog/archives/dot-template/
模版引擎之前在介绍mustache时已经提到了。doT、mustache各有优势吧,如果用于JS环境,doT的性能更胜一筹,并且套语句更方便些。现在公司的mobile页面已经被我替换成doT了。
doT source: https://github.com/olado/doT
Docs: http://olado.github.com/doT/
doT上手比较容易,但之前熟悉了mustache,改用doT时有点不习惯,但用两次就好了。
下载doT.js(里面有个doU.js不要用,doU.js是为了测试遗留问题的)。举个简单的使用例子:
HTML部分:
<script id="j-tmpl" type="text/template">{{ if(it.success){ }} <h2>results:</h2> <ul> {{ for (var i = 0, l = it.data.length; i < l; i++) { }} <li> <h5>{{=it.data[i].title}}</h5> <p>{{!it.data[i].message}}</p> </li> {{ } }} <ul>{{ }else{ }} <h2>暂无数据</h2>{{ } }}</script>
JS部分:
<script>var obj = { success: true, data:[ {title:'item1',message:11}, {title:'item1',message:22} ]}var tmpl = document.getElementById('j-tmpl').innerHTML;var doTtmpl = doT.template(tmpl);console.log(doTtmpl(obj ));</script>
看了例子,就应该会使用了。
{{=it.xx}} 取obj.xx的值
{{ }} 里面放if els / for 等表达式
{{!it.xx}} 取把obj.xx转义后的值
这些基本够用了,还有复杂的应用,可以看doT主页内的examples、docs。
并且,可以很容易把doT写成jquery插件:
$.extend({tmpl: function(template, data){ return doT.template(template).apply(null,[data]);}});
1 0
- doT.js 模板引擎的使用
- doT.js 模板引擎的使用
- doT.js 模板引擎
- doT.js 模板引擎学习摘记
- doT模板引擎
- doT.js——前端javascript模板引擎问题备忘录
- html模板引擎(doT.min.js)和分页插件
- doT.js的基本使用
- doT.js插件的使用
- doT js模板入门
- nodejs模板引擎doT使用方法
- doT模板引擎源码分析
- JS模板引擎---腾讯artTemplate的使用
- 关于js模板引擎 arttemplate 的使用
- Gson传递list(包括doT.js模板使用)
- doT js模板入门 2
- doT js模板入门 3
- require.js+knockout.js+.underscore模板引擎的使用
- 欢迎使用CSDN-markdown编辑器
- Google《Android性能优化》学习笔记
- CentOS 启动防火墙打开端口
- UVA 567 Risk
- 回来了
- doT.js 模板引擎的使用
- 算法08 之堆
- 4.机器学习实战之朴素贝叶斯
- gridview自动排序示例分享-自动排序
- CSS
- flexbox布局属性flex-direction属性的学习
- leetcode 180. Consecutive Numbers
- mac arc 兼容
- 制作一个简单的倒计时动画