一、简单示例
代码：
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: "<b>ninesoft</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": 217 };8 show(Mustache.render("`name`.`first``name`.`second` age is `age`", view));
结果：
结论：
相信看到第一个示例的时候，就会有人想到能不能绑定子属性，如果你努力看下去了。
那么祝贺你，现在就是解决你的需求的方式，仅仅只需要通过.来使用子属性即可。
四、条件式选择是否渲染指定部分
代码：
1 var view = {2 person: false3 };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`。
六、循环输出指定函数处理后返回的值
代码：
1 var view = { 2 "beatles": [ 3 { "firstname": "Johh", "lastname": "Lennon" }, 4 { "firstname": "Paul", "lastname": "McCartney" } 5 ], 6 "name": function () { 7 return this.firstname + this.lastname; 8 } 9 };10 show(Mustache.render("{{#beatles}}`name`<br />{{/beatles}}", view));
结果：
结论：
循环输出是有了，但是我们还想后期进行加工。那么这个完全符合你的需要，因为Mustache会将
数组中的值传递给你的函数，输出你函数返回的值。这里我们可以看到最外层是数组，只要在里面
使用函数那么外层的数组就会作为这个函数的参数传递进去。
七、自定义函数
代码：
1 var view = {2 "name": "Tater",3 "bold": function () {4 return function (text, render) {5 return render(text) + "<br />";6 }7 }8 }9 show(Mustache.render("{{#bold}}`name`{{/bold}}", view));
结果：
结论：
上面我们都是用的变量作为节，那么我们现在用函数作为节，会有什么效果呢。
它会调用我们函数返回的函数，将节中间的原始字符串作为第一个参数，默认
的解释器作为第二个参数，那么我们就可以自行加工。
八、反义节
代码：
1 var view = {2 "repos": []3 };4 show(Mustache.render("{{#repos}}``.``{{/repos}}{{^repos}}no repos{{/repos}}", view));
结果：
结论：
上面我们也用节，但是仅仅只能选择是否输出某个部分。所以这里我们弥补一下。
如果我们使用了{{^和}}来定义节的话，那么这个部分只会在里面的值为空，null，
空数组，空字符串的时候才会显示。那么我们就可以实现了if else的效果了。
九、部分模板
代码：
1 var view = { 2 names: [ 3 { "name": "y" }, 4 { "name": "z" }, 5 { "name": "f" } 6 ] 7 }; 8 var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}"; 9 var name = "<b>`name`</b>";10 show(Mustache.render(base, view, { user: name }));
结果：
结论：
Mustache虽然节约了很多时间，但是我们定义了很多模板，但是彼此之间无法互相嵌套使用，也会造成繁琐。
所以这里我们还要介绍如何定义部分模板，用来在其他模板里面使用，这里使用其他模板的方式仅仅是{{>templetename}}。
最大的不同就是Mustache.render方法有了第三个参数。
十、预编译模板
代码：
1 Mustache.parse(template);2 //其他代码3 Mustache.render(template,view);
结论：
模板既然有好处，也有坏处。就是编译模板需要时间，所以在我们已知会使用某个模板的前提下，我们可以预先编译好这个模板，以便后面的使用。
Xamarin.Android -> Xamarin.IOS -> 混合 -> Xamarin.Forms
本文转自 陈小龙哈 51CTO博客，原文链接:http://blog.51cto.com/chenxiaolong/1702239
