[jQuery] mustache介紹

on

何謂mustache

        mustache為一種jQuery的tempale，目的為利用template讓程式的邏輯減少。達到HTML與Javascript獨立使用的效果。讓View與功能一分為二。
他現在支援相當多種版本，如下Ruby, JavaScript, Python,Erlang, PHP, Perl, Objective-C, Java, .NET,Android, C++, Go, Lua, ooc, ActionScript,ColdFusion, Scala, Clojure, Fantom,CoffeeScript, D, and for node.js.


註 : 上述的版本，若需要其中一種，請自行點連結前往下載


使用javascript版本時，若想要使用jquery方式，請記得下載完mustache.js後，確認有無這段，若無請加上以下這段code

;(function($) {
  
  /*
   * ...
   *此區域為mustach檔案內的程式碼
   * ...
   */

  $.mustache = function (template, view, partials) {
    return Mustache.render(template, view, partials);
  };

  $.fn.mustache = function (view, partials) {
    return $(this).map(function (i, element) {
      var template = $(element).html().trim();
      var output = $.mustache(template, view, partials);
      return $(output).get();
    });
  };

})(jQuery);


mustache基本使用方法介紹

        mustache大多使用主要是使用鬍子(大括號){{}}來進行他的判斷。

例如:

{{variable}}  此為Mustache印出變數內容的方法

{{#variable}}區間{{/variable}} 此為多用途方法，根據variable的值不同而有所不同

    1. 若variable為true false null 此即為if 判斷，若variable = true則會執行區間的程式碼
    2. 若variable為array，此即為loop迴圈式子，根據陣列大小而重複執行區間的程式碼
    3. 若variable為callable object，此為Lambdas寫法(將區間內容包上一層外在的code)


{{^variable}}區間{{/variable}} 此為if 判斷式，只不過這是反向的，有加上not之意，亦即variable為false null時，才會執行區間的程式碼

{{{variable}}} or {{&variable}} 此為防止mustache 自動將html編碼的方式之，若variable是字串，且字串裡面是html，利用三層鬍子或是&來防止mustache將他自動編譯

{{! i am a comment, ignore me}} 驚嘆號{{!}}為註解

此五種就是mustache的基本用法，並且是最常用的，只要掌握住就可以使用mustache plugin了。


若想知道如何撰寫mustache template請到這裡。



來源網站


Comments

Post a Comment