mustache模板简单应用

Posted 2020-09-25 若栖1017

一。简单的对象

 

数据：

 

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

    查看