doT使用心得

###doT是一个小巧快速无依赖的JS模板框架:

无依赖, 120 行代码
极其快速
自定义定界符 (custom delimiters)
运行时求值 (runtime evaluation)
运行时插值 (runtime interpolation)
编译时求值 (compile-time evaluation)
支持局部模板
支持条件语句
Github源码地址

###DoT定界符列表:

{{ }} 用于求值(evaluation)
{{= }} 用于插值(interpolation)
{{! }} 用于编码求值
{{# }} 用于编译时求值/引入和局部模板
{{## #}} 用于编译时定义
{{? }} 条件语句
{{~ }} 数组迭代

###Demo:

####首先需要引入 javascript 文件：

<script type="text/javascript" src="doT.js"></script>

插值/求值模板

模板数据必须使用 it 作为引用

	<script id="pagetmpl" type="text/template">
		<h2>Here is the page using a header template</h2>
		//{{=}}插入值
		{{=it.name}}
		//{{#}}编译时求值
		{{#def.header}}
	</script>

	<script type="text/javascript">
	    //模拟数据 
		var data = {
			title: "My title",
			name: "My name"
		};
		// template()是dot用来编译模板的方法
		var pagefn = doT.template(document.getElementById('script模板ID').html(), data);
		// content是自定义模板ID
		document.getElementById('content').innerHTML = pagefn; 
	</script>

	<body>
		<div id="content"></div> 
	</body>

数组迭代模板

	<script type="text/template" id='girlList'>
	    {{~it:value}}
	    <li class="item" onclick="console.log('我是:{{=value.nick}}')">
	        ![]({{=value.img_url}})
	        <p class="name">{{=value.nick}}</p>
	        <p class="info">{{=value.age}}岁    {{=value.username}}</p>
	    </li>
	    {{~}}
	</script>

    // ret是服务器返回JSON数据
    // template()是dot用来编译模板的方法 girlList是自定义模板ID
    var resultText = doT.template(girlList.innerHTML)(ret); 
    // 追加数据
    $('ul').append($api.dom('#dataList'), resultText); 
    // 覆盖数据
    $('ul').html(resultText);

####条件模板

{{？x==y}}
<div>如果x==y执行这里</div>
{{??}}
<div>如果x==y不成立 执行这里</div>
{{？}}

发现一个小东西,使用拼接字符串方式的时候:

	var resultStr = "";
	for(var i = 0;i < ret.length; i++){
		resultStr += '<li class="item" onclick="console.log(ret[i])">';
		resultStr += '![]('+ ret[i].img_url+')'
		resultStr += '<p class="name">'+ ret[i].nick+'</p>'
		resultStr += '<p class="info">'+ ret[i].age+'岁    '+ ret[i].username+'</p>'
		resultStr += '</li>'
	}

这里的console.log(ret[i])没法执行,因为浏览器编译时onclick方法并不在这个for循环下,ret是undefined,而使用doT模板没有这个问题,可以比较方便的操作数据,

仅供参考,欢迎指正

秦浩雷

发布了97 篇原创文章 · 获赞 25 · 访问量 16万+

私信关注

插值/求值模板

数组迭代模板

猜你喜欢