嵌套模板問題

Question

我想使用jQuery Templates。初看起來，{{tmpl}}標籤似乎是要走的路，但我需要在模板化時進行額外的步驟，而且我無法弄清楚如何執行此操作。

有一個數據類型定義與數據對象的屬性相關。在下面的例子中，'movie'是一個文本字段，'released'是一個數字字段。所有文本字段使用特定的模板，所以所有的數字字段。這些嵌套模板對使用它的上下文（這裏是電影）一無所知。因此，那裏使用的標籤總是$ {value}。 「外層」模板反而知道電影應該是什麼樣子。它的標籤（電影和發佈）被「內部」數據類型相關模板取代。額外的步驟是在外部模板完成之前替換$ {value}。

所有我能想出是這樣的：

//the template used for all string-fields 
var templForStrings = "<b>${value}</b>"; 
//the template used for all numeric fields 
var templForNum = "<i>${value}</i>"; 

//data of a movie 
var data = {}; 
data.movie = "Cowboys and Aliens"; //a string field 
data.released = 2011; //a numeric field 

//the template to show a movie 
var templForMovies = "<div>{{html movie}} ({{html released}})</div>"; 

//normally a loop over the fields here 
var field = {value: data.movie}; 
data.movie = $.tmpl(templForStrings, field).fullhtml(); 

field.value = data.released; 
data.released = $.tmpl(templForNum, field).fullhtml(); 

//now the movie template 
$.tmpl(templForMovies, data).appendTo("body"); 

當然這個場景被簡化。數據類型模板比這更復雜。數據可以是任何東西。由於$ {value}在這裏意味着兩件不同的事情，所以我不知道如何使用插件提供的嵌套模板。但我敢肯定有一個更優雅，更快捷的方式比我的代碼（這甚至需要fullhtml-Plugin。這真的是很好，有這樣

<div>${movie} (${released})</div> 

，因爲這些模板是可創建最終用戶過了，應該是儘可能簡單

Answer 1

也許你可以使用一個輔助函數來做到這一點。

HTML：

<div id="container"></div> 

<script id="tmplObject" type="text/x-jquery-tmpl"> 
{{each $data}} 
    {{html Helper($item, $index)}} 
{{/each}} 
</script> 

<script id="tmplNumber" type="text/x-jquery-tmpl"> 
number: <b>${Value}</b><br/> 
</script> 

<script id="tmplString" type="text/x-jquery-tmpl"> 
string: <i>${Value}</i><br/> 
</script> 

腳本：

<script type="text/javascript"> 

    Helper = function($item, $index) { 
     var value = $item.data[$index]; 
     var type = (typeof value.Value).toLowerCase(); 
     var tmplName = "#tmplObject"; 

     if (type == 'number') { 
      tmplName = "#tmplNumber"; 
     } 
     else if (type == 'string') { 
      tmplName = "#tmplString"; 
     } 

     var $node = $('<div>').append($(tmplName).tmpl(value)).remove(); 
     return $node.html(); 
    }; 


    $(function() { 
     var data = { 
      Name: { Value: "John" }, 
      Age: { Value: 999 }, 
      Type: { Value: { 
       Id: { Value: 123 }, 
       TypeName: { Value: 'Human' } 
      } 
      } 
     }; 

     $('#tmplObject').tmpl(data).appendTo('#container'); 
    }); 
</script>