嵌套模板问题

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>