码迷,mamicode.com
首页 > 其他好文 > 详细

mustache模板简单应用

时间:2017-06-25 23:55:05      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:log   render   bsp   mon   color   auto   sde   简单应用   one   

一。简单的对象
 
数据:
 
data={
name:"张三",
money:29
}

 

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

 

 
二。list 循环
 
 
data = {
    list: [
        {
            title: "最新新闻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模板简单应用

标签:log   render   bsp   mon   color   auto   sde   简单应用   one   

原文地址:http://www.cnblogs.com/zjy1017/p/7078393.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!