Kairyou's Blog

• blog搬家到linode的VPS

  发布时间: 2012-04-04 / 分类: 生活 / No Comments

  速度真的杠杠的, 装的Debian+Tengine, 后面又加上了concat module, 现在可以自动合并css/js文件了,现在博客的css文件已经合并成一个了. 后面抽时间装上nodejs, 这样就更爽了.

• doT.js 模板引擎的使用

  发布时间: 2012-02-20 / 分类: 开发,实践 / 7 Comments

  模版引擎之前在介绍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, view){
  	return doT.template(template).apply(null,[view]);
  }
  });
  

« Older Entries