problème de modèles imbriqués

Question

Je voudrais utiliser le jQuery Templates. À première vue, la balise {{tmpl}} semble être la meilleure solution, mais je dois faire un pas de plus lors de la création de modèles et je n'arrive pas à comprendre comment procéder.

Il existe une définition de type de données connectée aux propriétés d'un objet de données. Dans l'exemple ci-dessous, 'movie' est un champ de texte, 'released' un champ numérique. Tous les champs de texte utilisent un certain modèle, donc tous les champs numériques. Ces modèles imbriqués ne connaissent rien au contexte (ici les films) dans lequel ils sont utilisés. Donc, la balise utilisée ici est juste $ {value} toujours. Le modèle "externe" sait à la place comment un film devrait ressembler. Ses balises (movie et released) sont remplacées par les templates "inner" liés aux types de données. L'étape supplémentaire consiste à remplacer $ {value} avant que le template externe ne soit terminé.

Tout ce que je pouvais trouver est la suivante:

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

Bien sûr, ce scénario est simplifié. Les types de données sont beaucoup plus complexes que cela. Les données peuvent être n'importe quoi. En raison de $ {value} signifiant deux choses différentes ici, je ne vois pas comment utiliser les templates imbriqués fournis par le plugin. Mais je suis tout à fait sûr qu'il ya une façon plus élégante et plus rapide que mon code (qui doit même le fullhtml-Plugin. Ce serait vraiment agréable d'avoir un modèle comme celui-ci

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

que ceux-ci sont creatable par les utilisateurs finaux aussi, et devrait être aussi simple que possible

Answer 1

peut-être que vous pouvez utiliser une fonction d'assistance pour le faire.

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> 

scénario

:

<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>