template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。在我们编写HTML代码时,我们可以使用这个模板来进行表格的创建等,输出我们一个数据改变的表格,下面我们来说一下他的用法。
<script id="tpl" type="text/html">
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
</script>
上面的ul和li标签我们可以根据自己的需要来 改写,表格的话改写成tr td就可以了。这只是一个模板,不改变框架的条件下我们可以根据自己的需要,随便增加代码来实现我们需要的功能。
渲染模板:
var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});
如果我们的数据太长,我们可以将它存在对象中,有下面写法:
var tpl = document.getElementById('tpl').innerHTML;
template(tpl, data);
其中data必须是一个对象。
我们在HTML页面引入temlpate.js即可。
<script src="../node_modules/template_js/template.js"></script>
下面我们来说一下怎么下载这个模板。
第一种方法,推荐使用NPM安装和更新,在终端中输入
$ npm install template_js
第二种方法,或者你也可以在GitHub上,下载源文件或压缩包,建议使用第一种方法,第二中我不太会用,觉得第一种方法简单点。