doT模板使用心得

最新推荐文章于 2024-04-21 12:32:09 发布

Harry.Q

最新推荐文章于 2024-04-21 12:32:09 发布

阅读量1.8k

点赞数 2

文章标签： javascript 数据 doT

本文链接：https://blog.csdn.net/Holy_Q/article/details/77093075

版权

doT是一个120行代码的JavaScript模板框架，具备无依赖、运行时和编译时求值、插值等功能。它支持自定义定界符和条件语句。示例展示了如何使用doT进行插值、编译时求值、数组迭代和条件模板渲染。与传统的字符串拼接方法相比，doT在处理数据操作时更有效。

摘要由CSDN通过智能技术生成

###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);

####条件模板

{{？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模板没有这个问题,可以比较方便的操作数据,

仅供参考,欢迎指正

Harry.Q

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
doT模板使用心得

DoT是一个小巧快速无依赖的JS模板框架:无依赖, 120 行代码极其快速自定义定界符 (custom delimiters)运行时求值 (runtime evaluation)运行时插值 (runtime interpolation)编译时求值 (compile-time evaluation)支持局部模板支持条件语句 Github源码地址DoT定界符列表:{{ }} 用于求
复制链接

扫一扫