проблема с вложенными шаблонами

Question

Я хотел бы использовать jQuery Templates. На первый взгляд, тег {{tmpl}}, похоже, подходит, но мне нужно сделать дополнительный шаг при шаблонизации, и я не могу понять, как это сделать.

Существует определение типа данных, связанное с свойствами объекта данных. В приведенном ниже примере «movie» - текстовое поле, «выпущено» числовое поле. Все текстовые поля используют определенный шаблон, поэтому все числовые поля. Эти вложенные шаблоны ничего не знают о контексте (здесь фильмы), в котором они используются. Таким образом, тег, используемый там, всегда равен $ {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> 

как это creatable конечных пользователей тоже, и должен быть как можно более простым

Answer 1

может быть, вы можете использовать функцию Helper, чтобы сделать это:.

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>