Mustache使用初级.docVIP

一、简单示例 代码： 1 function show(t) { 2 $(#content).html(t); 3 } 4 5 var view = { 6 title: YZF, 7 cacl: function () { 8 return 6 + 4; 9 } 10 }; 11 $(#content).html(Mustache.render({{title}} spends {{cacl}}, view)); 结果： YZF spends 10 结论： 可以很明显的看出Mustache模板的语法，只需要使用{{和}}包含起来就可以了，里面放上对象的名称。 通过本示例也可以看出，如果指定的属性为函数的时候，不会输出函数里面的内容，而是先执行函数，然后将返回的结果显示出来。 ? ?二、不转义html标签 代码： 1 var view = { 2 name: YZF, 3 company: bninesoft/b 4 }; 5 show(Mustache.render({{name}} br / {{company}} br /{{{company}}}br/{{company}}, view)); ?结果： 结论： 通过这个示例可以看出Mustache默认是会将值里面的html标记进行转义的，但是有时候我们并不需要。 所以这里我们可以使用{{{和}}}包含起来，或者是{{和}}包含，那么Mustache就不会转义里面的html标记。 ? 三、绑定子属性的值 代码： 1 var view = { 2 name: { 3 first: Y, 4 second: zf 5 }, 6 age: 21 7 }; 8 show(Mustache.render({{name.first}}{{name.second}} age is {{age}}, view)); ?结果： ? 结论： 相信看到第一个示例的时候，就会有人想到能不能绑定子属性，如果你努力看下去了。 那么祝贺你，现在就是解决你的需求的方式，仅仅只需要通过.来使用子属性即可。 四、条件式选择是否渲染指定部分 代码： 1 var view = { 2 person: false 3 }; 4 show(Mustache.render(eff{{#person}}abc{{/person}}, view)); ?结果： 结论： 问题总是不断，如果我们还需要能够根据我们给的值，决定是否渲染某个部分。 那么现在就可以解决这个问题，当然还要提示的就是不仅仅是false会导致不渲染指定部分。 null，空数组，0，空字符串一样有效。语法上面比较简单，就是使用{{#key}} ... {{/key}} 来控制中间的内容。 ? 五、循环输出 代码： 1 var view = { 2 stooges: [ 3 { name: Moe }, 4 { name: Larry }, 5 { name: Curly } 6 ] 7 }; 8 show(Mustache.render({{#stooges}}{{name}}br /{{/stooges}}, view)); 结果： 结论： 仅仅学会上面的方式，大部分地方你都解决了，但是还是会出现麻烦的地方。 就是循环输出，如果你一个一个写，相信会很烦躁，当然Mustache不会让我们失望， 它也给出了如何循环输出的方式，这里是将一个由对象组成的数组输出，如果我们 输出的是数组，就需要使用{{.}}来替代{{name}}。