template.js插件和ajax一起使用的例子

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取到的。

原文地址:https://www.cnblogs.com/stella1024/p/7275243.html