JS模板引擎---mustache与HandleBars

JS模板引擎—mustache与HandleBars

以前总听说模板引擎这个东西然而却没有研究过，这两天研究了一下模板引擎，最开始接触了mustache，它是一个客户端的模板引擎。 然后想了解一下服务端模板引擎，最开始接触了Jade发现这货太抽象风格不适合我。最后选择了 HandleBars 这款模板引擎。 它是mustache的一个扩展，支持客户端和服务端，很强大很好用，具体在客户端和服务端怎么使用，下面我给大家详解。

• 先说说mustache吧
  1.引入
  可以在github上获取相关的Mustache.js的文件然后再script标签引入
  或者使用 CDN 如下示范

<script src="http://cdn.bootcss.com/mustache.js/2.2.1/mustache.min.js"></script>

2.使用
{ {#}} { {/}} 见下代码

    var myData = {
        students : [
            {name : 'ruihao', years : 20, sex: 'man'},
            {name : 'jiahua', years : 21, sex: 'man'},
            {name : 'qinjie', years : 20, sex: 'woman'}
        ]
    };

    var template = "<div><table><tr><td>name</td><td>years</td><td>sex</td></tr>{
   {
   #students}}<tr><td>{
   {
   name}}</td><td>{
   {
   years}}</td><td>{
   {
   sex}}</td></tr>{
   {
   /students}}</table></div>";
    var viewTemplate = Mustache.render(template, myData);
    container.innerHTML = viewTemplate;

代码解释：
{ {#student}} { {/student}} 实际上构成了一个循环，会遍历student这个数组，这个数组的每一个元素都是一个对象，所以每个对象的name,years,sex属性都会输出。 注意一下Mustache.render这个函数它接收两个参数：第一个是模板字符串，第二个是这个模板字符串的上下文对象，作为模板字符串的数据来源
最后页面为：
ruihao 20 man
jiahua 21 man
qinjie 20 woman


实际上{ {#}} { {/}}不光有循环数组的作用。还有判断null/false/undefined的作用，如果为null/false/undefined 那么则不渲染

    var myData