专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

doT.js 模板引擎的使用

模版引擎之前在介绍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]);
}
});

/ 分类: 开发,实践 / TrackBackhttps://xhl.me/archives/dot-template/trackback标签: 模板引擎

已有 47 条评论 »

  1. 浅析js模板引擎 | 技术宅改变世界

    [...]doT模板语法灵活,阅读起来很易懂。可以方便地改造成jquery插件。[...]

  2. spade spade

    如何我想在网页中显示{{}} 怎样才能避免和 模板的{{}}冲突呢?

    1. kairyou kairyou

      Hi, 你可以设置:doT.templateSettings, olado.github.io/doT 有介绍.

  3. 几种主流js模板引擎介绍和分析 | 吴越个人博客

    [...]doT模板语法灵活,阅读起来很易懂。可以方便地改造成jquery插件。[...]

  4. jaylee jaylee

    第一次看到它就会想到jsp,个人觉得dot的耦合度太机密了,就和jsp一样,写得 页面多了,会乱的,真心不如mustache,可能它在性能上略胜mustache吧

  5. js模板引擎介绍搜集 R11; CSDN博客 | 围炉网

    [...]模板语法灵活,阅读起来很易懂。可以方便地改造成 jquery插件。[...]

  6. wsztrush wsztrush

    后端模板(比如Velocity)中可以直接调用Java中定义的方法,在doT.js中是否也可以直接使用?

    1. kairyou kairyou

      doT是已经拼接好字符串了, 估计应该是不行的.

  7. js模板引擎介绍搜集 R11; 写代码的熊猫

    [...]doT模板语法灵活,阅读起来很易懂。可以方便地改造成jquery插件。[...]

添加新评论 »