ネストされたテンプレートの問題

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"); 

このシナリオが簡略化されます。データ型テンプレートはそれよりもはるかに複雑です。データは何でもかまいません。ここでは2つの異なる意味を持つ$ {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>