我最近这两年一直在用template.js(腾讯的产品，简单、迅速)来渲染页面，用template+ajax来做前后端分离。vue.js用过一个项目，但是总觉得还是啰嗦，没有template+jquery来的痛快，可能是我个人的习惯感受吧。

template从原生的<%%>到简洁的{{}}格式我都用过,我现在用的4.13.1，甚至可以把原生和简洁的混搭着写。

首先从网上下载template-web.js，并引入页面

从服务端获取数据

$.ajax({

type : 'GET',

url : 'data/myfile.json', //json文件地址

data : {'r' : Math.random()}, //向服务端传递给随机数，保证每次获取的都是最新的json数据

success : function(data){

var json = JSON.parse(data);

setTpl("goods","goodsTpl",json,function(){

/* setTpl是我自己做的一个用于把经由template渲染后的数据加载到容器上的函数 */

//goods 是容器ID，goodsTpl是模版ID

//数据渲染完成后要做的。。。

});

}

});

//setTpl函数细节如下，一个自定义函数，我觉得这么挺好用

function setTpl(containerID,tplID,json,callback){

var json = json || {};

document.getElementById(containerID).innerHTML = template(tplID,json);

if(callback && typeof(callback) == 'function'){

callback();

}

}

2.页面模版如下(移动端页面)

<div class="mui-content" >

<ul class="mui-table-view mui-grid-view" id="goods"></ul>

</div>

<!--

我这里用的是简洁模式，原生模式大家可以去网上查

-->

<script type="text/html" id="goodsTpl">

{{each goodsList} <!--循环开始-->

<li class="mui-table-view-cell mui-media mui-col-xs-6">

<a href="javascript:;">

<img class="mui-media-object" src="{{$value.img}}">

<!--无循环变量时要用$value访问每一行，当有循环变量时可参考下面书写方法-->

<div class="mui-media-body">{{$value.title}}</div>

</a>

</li>

{{/each}} <!--循环结束-->

</script>

<!--当给定循环变量时-->

<script type="text/html" id="goodsTpl">

{{each goodsList as val index} <!--循环开始 val表示每一行，index表示行索引从0开始-->

<li class="mui-table-view-cell mui-media mui-col-xs-6">

<a href="javascript:;">

<img class="mui-media-object" src="{{val.img}}">

<!--当有给定循环变量时，其变量'val' 前不用加'$'符号-->

<div class="mui-media-body">{{val.title}}</div>

<!--如果要显示行索引-->

<div class="mui-media-body">{{index}}</div>

</a>

</li>

{{/each}} <!--循环结束-->

</script>

3.myfile.json格式如下

{"goodsList" :

[{"img":"img/timg.jpg","title":"幸福","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":100},

{"img":"img/timg2.jpg","title":"木屋","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":101},

{"img":"img/timg3.jpg","title":"幸福2","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":102},

{"img":"img/timg3.jpg","title":"幸福3","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":103},

{"img":"img/CgAgEVhrVymAU-zvAAHDJg1kGVs979_jpg_320x320.jpg","title":"幸福4","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":104},

{"img":"img/CgAgEVhrVymAU-zvAAHDJg1kGVs979_jpg_320x320.jpg","title":"幸福5","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":105},

{"img":"img/CgAgEVhrVymAU-zvAAHDJg1kGVs979_jpg_320x320.jpg","title":"幸福6","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":106},

{"img":"img/CgAgEVhrVymAU-zvAAHDJg1kGVs979_jpg_320x320.jpg","title":"幸福7","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":106},

{"img":"img/CgAgEVhrVymAU-zvAAHDJg1kGVs979_jpg_320x320.jpg","title":"幸福8","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":106},

{"img":"img/CgAgEVhrVymAU-zvAAHDJg1kGVs979_jpg_320x320.jpg","title":"幸福9","info":"能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？","id":106}

]}

这就是最简单的template渲染模式,欢迎大家讨论指导