dot.js-js模板引擎使用,教程,入门
dot.js是一个模板框架,在web前端使用。
doT.min.js是dot.js的压缩版。
简单demo代码:
html、javascript代码一览:
在浏览器运行的效果:
dot.js作为模板引擎,
主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码。
这是很简单的web前端模板框架,
简单说几个东西,你就会用了!
1、在模板中,it这个变量,就是传递进去的数据对象,应该就是英语的items;
2、 doT.template( template )( obj ) 代码解释:把模板template,作为参数传入 doT.template() 方法,dot就把模板处理一下,然后你再把数据对象传入,返回值,就是html与数据 一起生成的html代码了,再拼 接到页面即可;
3、在模板中,{{}} 包裹的内容,就是javascript代码,dot会负责处理,因为这写法怪异,新手一般出现模板写错的情况,仔细排查即可 。
演示中的源码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body >
<ul id='showInfo'>
<script type="text/template" charset="utf-8" id='template_1'>
{{if( it && it.length>0 ){ }}
{{for(var i=0; i<it.length; i++){ }}
<li>{{=it[i].name}}</li>
{{ } }}
{{ }else{ }}
<li>没有数据。</li>
{{ } }}
</script>
</ul>
<br>
<hr >
<br>
<ul id='showInfo2'>
</ul>
</body>
<script type="text/javascript" charset="utf-8" src='doT.min.js'></script>
<script type="text/javascript" charset="utf-8">
var template=document.getElementById('template_1').innerHTML;
var obj=[{name:'d1'},{name:'d2'},{name:'d3'}];
//传递一个有数据的数组进去
document.getElementById('showInfo').innerHTML=doT.template( template )( obj );
//传入的数据为空
document.getElementById('showInfo2').innerHTML=doT.template( template )( [] );
</script>
</html>