JavaScript模板temlpate.js

 

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上，下载源文件或压缩包，建议使用第一种方法，第二中我不太会用，觉得第一种方法简单点。