这个拼接过程放在Javascript文件中，显得非常不优雅。如果还把style也放在Javascript中，那数据、结构还有样式整个就是一锅粥了，要维护这样的代码会让人想自杀。最过分的就是把页面上最终要生成的HTML都直接放在服务器端，ajax吐出数据就包含了
后来我们知道了不要在Javascript中对DOM进行style定制，而是只需要在CSS文件中定义好对应的class，然后在Javascript中使用这个class就好。
接下来我们要做的就是用Javascript模板把HTML结构（在这个案例中，是
市面上的Javascript模板很多了，以handlebars这个优秀的模板为例吧：
我们在页面的html中定义模板：
复制代码 代码如下:
然后在我们的逻辑Javascript代码中可以把数据拼接到这一模版中：
复制代码 代码如下:
var source = $("#list-template").html(); //模板源，一般放在html的script中，这里我们使用jQuery，也可以使用其它方法直接获得内容字符串
var template = Handlerbars.compile(source); //编译生成一个模板template
var context = {title:"This is a todo item"} //获得数据，数据一般从ajax或者input中取得
var html = template(context); //数据+模板=新的html
这就是基本的 用法了，更多逻辑可以参考官方文档：http://handlebarsjs.com/
