专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端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://lb-dm-lax-spro.xhl.me/archives/dot-template/trackback标签: 模板引擎

已有 47 条评论 »

  1. 12mo 12mo

    请问一下,dot.js是否必须用原生态js写,例如写“var tmpl = document.getElementById('j-tmpl').innerHTML;” 的时候能否用jq写成“$('#j-tmpl).text();”

    1. kairyou kairyou

      可以的, 只要能获取到内容再传给DOT就OK了.

  2. uxspy uxspy

    - doT.js停止开发了吗?我看作者好久没更新了,去她的twitter上看也是好几个月前的推了。
    - doT.js可以用npm install dot安装,我想知道我在CentOS下用的是yum咋装...兄台知道吗?

    1. kairyou kairyou

      @uxspy
      的确很久没更新了, twitter的hogan更新也不频繁. 你是要CentOS下装nodejs吗? 装npm/node的话推荐先装nvm, 用起来蛮方便的.

  3. jinc jinc

    请问一下 在项目中用doT 直接引入doT.js就可以了吗 例如: 这样就可以了吗 不要安装什么的吧 我下载下来的doT-master文件夹怎么有很多东西呢?

    1. kairyou kairyou

      @jinc
      是的. 只是使用的话,其他东西可以忽略.

  4. yiqing-95 yiqing-95

    对 [artTemplate](https://github.com/aui/artTemplate) 怎么看呢

    1. kairyou kairyou

      @yiqing-95
      抱歉, 没用过不敢乱评价, 据说应该是不错的. 补充一个对比:http://goo.gl/lFzZ7

  5. jamacy jamacy

    你把公司mobile页面doT了,所有的动态数据都用dot来渲染,为什么不用后台语言来渲染呢?

    1. kairyou kairyou

      @jamacy
      不可能所有都要後端, ajax場景不就用必須用js模板了嗎?

      1. jamacy jamacy

        ajax场景,第一次加载的时候会有短暂的渲染,页面部分内容会没内容,这一点你是怎么处理的,还有,mobile 中,我想问下你具体都使用了哪些前端的技术?

        1. kairyou kairyou

          @jamacy
          1. loading提示.
          2: 因为11年写的, 还没改版, 大概用到的:localStorage,openDatabase,sessionStorage,geolocation,canvas,延迟加载/预加载.

          1. jamacy jamacy

            有没有用到 前端mvc 上的东西!!

          2. kairyou kairyou

            @jamacy
            你是指 backbone angular ? 11年还没听过. 如果单纯说mvc那模版引擎不就做到了? 你是想了解什么哦?

  6. popeye popeye

    $.extend({
    tmpl: function(template, data){
    return doT.template(template)(data);
    }
    });
    为啥要用apply? 有什么用意么?

    1. kairyou kairyou

      @popeye
      没啥用意, 只是习惯, apply方便传数组, 用到稍微多一点.

  7. wensonsmith wensonsmith

    譬如我想在 index.html中引用 header.html 和footer.html,
    用的是nodeJs+express‘
    doT.js 应该怎么用啊???

    1. kairyou kairyou

      要看你npm装的哪个package, 比如dot-emc用def.include, express-dot用def.load

添加新评论 »