template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。

 

https://github.com/yanhaijing/template.js  (template源码的GitHub地址) ,下面来介绍template的模板: 

 

1. 编写模版

使用一个type="text/html"的script标签存放模板，或者放到字符串中：

<script id="tpl" type="text/html">
　　<ul>
   　　 <%for(var i = 0; i < list.length; i++) {%>
    　　　　<li><%:=list[i].name%></li>
   　　 <%}%>
　　</ul>
</script>

2. 渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

3. 在网页输出的结果：

  • yan
  • haijing

 

 

 

 

 

 

//未完成,待续-------

 

在单页面应用，我们对页面的无刷新有了更高的要求，HTML不再由后端生成，后端只提供一个REST API，返回JSON数据，模版引擎可以大大方便我们渲染一个视图。而不是吃力的使用 jQeury 去拼接一个DOM。

在现在比较常见的 JS MVC Framework ： backbone, emberjs, angularjs 中，模板是非常重要的一个组件。

在现在比较常见的 JS MVC Framework ： backbone, emberjs, angularjs 中，模板是非常重要的一个组件。

模板是对”如何渲染一个对象“这个逻辑的一种表述方式，并且是一个简便自然的表述方式。所以凡需要渲染一个对象的地方，都会出现模板机制。现在js里面渲染对象变得常见，比如楼主提到的ajax和楼上提到的各种浏览器端mvc框架。所以js模板机制也变得常见。

常见的是JSON数据转换成HTML代码填充到页面中。
这个JSON数据就是通过AJAX取到的。

 

前端菜鸟一枚，习惯记录平时遇到的一些问题和学习笔记，觉得有用的可以点个支持！