Js 模版——jQuery Templates plugin API

翻譯 

JQuery.tmpl ( template, [data ,options] )

* template : HTML 或 text 組成的 template；

* data ：將要渲染的數據，能夠是 Javascript 中任意的一個數據類型，包括 object 或 array；

* options ：一個可選的用戶自定義 key-value 鍵值對，擴展了 ‘tmplItem’ 的數據結構，並在 template 的渲染過程也可使用。

返回：Jquery

Jquery Templates 插件的下載地址 是：https://github.com/BorisMoore/jquery-tmpl

JQuery.tmpl() 方法能夠和'.appendTo', '.prependTo','insertAfter' 及 '.insertBefore' 方法一塊兒組成鏈式調用。以下例所示：

   $.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

參數 template 的類型能夠是如下任意一種形式：

• 一個字符串，包含 markup
• 一個 HTML 元素（或是包裝的一個元素的 JQuery 對象）
• 一個字符串對應了一個已定義的 template 的名稱 （jQuery.template() and .template() ）
• 一個 compiled-template 方法 （JQuery.template() 和 .template() ）

若 data 是一個數組，template 在渲染的過程當中會迭代數組中的每個 item, 若 data 是一個對象類型或爲空，null, 則只會有一個template成員會被渲染。

函數的返回值是一個 JQuery 包裝的數組集合，集合裏面包含了已經渲染成功的 template items. 若是這個 template 只包含了一個頂級成員，則數組中的全部成員只會有一個 element 與之對應。

若想把渲染好的 template items 插入到 HTML DOM 中，該函數返回的 Jquery 集合不能夠直接的插入的 DOM 元素中，而是須要 '.appendTo', '.prependTo','insertAfter' 或 '.insertBefore' 方法一塊兒進行鏈式調用。

Example 1 —— 本地數據

template 使用的是字符串形式。

      var movies = [
          { Name: "The Red Violin", ReleaseYear: "1998" },
          { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
          { Name: "The Inheritance", ReleaseYear: "1976" }
        ];
    
      var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

      // Compile the markup as a named template
      $.template( "movieTemplate", markup );

      // Render the template with the movies data and insert
      // the rendered HTML under the "movieList" element
      $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

Example 2 ——遠端數據

    var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

    // Compile the markup as a named template
    $.template( "movieTemplate", markup );

    $.ajax({
      dataType: "jsonp",
      url: moviesServiceUrl,
      jsonp: "$callback",
      success: showMovies
    });

    // Within the callback, use .tmpl() to render the data.
    function showMovies( data ) {
      // Render the template with the "movies" data and insert
      // the rendered HTML under the 'movieList' element
      $.tmpl( "movieTemplate", data )
        .appendTo( "#movieList" );
    }    

Options ——可擴展參數

Template 中的 每一個 item 都是和 'tmplItem' 相關聯的，可使用 JQuery.tmplItem() 和 .tmplItem() 方法獲得，或者可使用 ‘$item’ 方式。

JQuery.tmpl() 的 options 參數 中任何 fields 或 匿名函數都會自動擴展 'tmplItem' 數據結構，能夠以下面這種方法使用：

   var markup = "<li>Some content: ${$item.myMethod()}.<br/>" 
           + " More content: ${$item.myValue}.</li>";

    // Compile the markup as a named template
    $.template( "movieTemplate", markup );

    // Render the template with the movies data
    $.tmpl( "movieTemplate", movies,
      { 
          myValue: "somevalue", 
          myMethod: function() { 
              return "something";
          } 
      } 
    ).appendTo( "#movieList" );

 

Template 的緩存機制

當一個 template 渲染成功以後，markup 會被首次轉變成一個 compiled-template 方法。每調用一次「$.tmpl( markup , myData ).appendTo( "#target" )」 這個方法，template 都會被從新編譯。若是一個相同的 template 須要被不一樣的數據渲染屢次，此時就應該將這個已編譯的 template 緩存起來。當使用一個 string 做爲一個markup 來緩存 template 時，咱們可使用 '$.template( name, markup )' 這個方法來建立一個已申明的template, 以便重複使用。