首页 > 代码库 > mustache模板简单应用

mustache模板简单应用

一。简单的对象
 
数据:
 
data=http://www.mamicode.com/{"张三",
money:29
}

 

 
模板:
 
Hello {{name}}
You have just won {{money}} dollars!

 

 
二。list 循环
 
 
data = http://www.mamicode.com/{"最新新闻1",
            autor: {
                name: "小小",
                date: "2017-6-23"
            },
            isdel:true
        },
        {
            title: "最新新闻1",
            autor: {
                name: "小小",
                date: "2017-6-23"
            },
            isdel:false
        },
        {
            title: "最新新闻1",
            isdel:true
        }
    ]
}

<script id="line" type="x-tmpl-mustache">
{{#list}}
  <div>
      <div>{{ title }}</div>
      {{#autor}}
            <div><span>{{name}}</span>     <span>{{date}}</span></div>
      {{/autor}}
  </div>
{{/list}}
</script>
var tpl=document.getEelementById("#line");
Mustache.parse(tpl);
var rendered = Mustache.render(tpl, data);
document.write(dd);
结果:
最新新闻1
小小     2017-6-23
最新新闻1
小小     2017-6-23
最新新闻1     
 
if else 处理 
 
{{#isdel}}<div class="btn-lg btn-blue look">查看</div>{{/isdel}} if判断
{{^isdel}}<div class="btn-lg btn-blue deal">处理</div>{{/isdel}} else判读

 

//采用上述data数据
 
结果:
 
最新新闻1
小小2017-6-23
     查看   
最新新闻1
小小2017-6-23
    处理    
最新新闻1
    查看    

mustache模板简单应用