一、簡單示例

代碼：

?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

總結

以上是生活随笔為你收集整理的javascript库之Mustache库使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。