underscore.js les modèles imbriqués

Question

Est-il possible de faire en quelque sorte de prendre un élément du DOM à partir d'un trait de soulignement modèle et l'utiliser comme un autre modèle?

L'idée, c'est que mon application doit rendre un document qui contient une boucle avec les éléments et un résumé. J'ai besoin de occasionaly re-rendre uniquement le résumé ou quelques articles, donc je ne viens de re-rendre l'ensemble de votre document.

Cependant, je tiens à garder les choses simples pour les utilisateurs de l'application pour créer leurs propres modèles pour le document et je pense que de tout garder dans un fichier pour un document à rendre plus facile.

Je suis en train d'utiliser quelque chose comme ceci:

<script type="text/template" id="document-template">
    <div id="document">
        <h1><%= name %></h1>
        <ul class="items">
            <% _.each(items, function(item) { %> 
                <li><%= item %></li>
            <% }); %>
        </ul>
        <div id="summary">
            <p>Total items: <%= totalitems %></p>
        </div>
    </div>
</script>

Maintenant, je peux facilement le faire var documentTemplate = _.template($('#document-template').html()); à en faire un modèle de document, mais je voudrais tourner le résumé de la partie dans un modèle et un élément de la liste dans un modèle en tant que bien.

Puis-je faire quelque chose comme ceci:

var summaryTemplate = _.template($('#document-template #summary').html());
var itemTemplate = _.template($('#document-template .items li').html());

PS. En fait, je suis le chargement du modèle à partir d'un fichier externe à l'aide de jQuery $.obtenir. De cette façon, je vais obtenir le document-modèle dans une grande chaîne. À partir de là, je peux le faire documentTemplate = _.template(loadedString);.

Maintenant, si seulement je pouvais extraire le #sommaire de l'élément de la chaîne, il devrait fonctionner. Mais quand j'essaie de convertir la chaîne de caractères de l'élément DOM ( var domElement = $(loadedString)) (si je pouvais faire ceci: summaryTemplate = _.template($('#summary',domElement).html());, ça ne marchera pas, parce que le trait de soulignement ne reconnaît pas le <%= %> des balises plus.

Answer 1

Vous pouvez passer le modèle imbriqué comme une variable dans le modèle des affectations pour le template principal, par ex.:

HTML:

<script type="text/template" id="sub_template">
  <article>
    <h1>id: <%= id %><h1>
  </article>
</script>

<script type="text/template" id="main_template">
  <% for (var i = 0; i < num; i++) { %>
    <%= renderSub({id:i}) %>
  <% } %>
</script>

JS:

 var renderSub = _.template( $('#sub_template').remove().text() ),
     renderMain = _.template( $('#main_template').remove().text() );

  renderMain({num:5, renderSub:renderSub});

Answer 2

Aire de jeux

/////// TEMPLATES //////

    var mainTemplate = "<ul> \
                          <% _.each(items, function(item) { %> \
                               <%= listItem({item:item}) %> \
                          <% }); %> \
                        <ul>";

    var subTemplate = '<li><%=item %></li>';


/////// MODEL (our data) //////

    var model = {
        items : [1,2,3,4,5]
    }


/////// COMPILE //////

    // add the subTemplate to the model data, to be passed to the mainTemplate
    model.listItem = _.template(subTemplate);

    // Render main template to the DOM
    document.body.innerHTML = _.template(mainTemplate, model);

Answer 3

Au lieu de chargement tout à la fois comme un modèle, puis en essayant de charger une partie de nouveau plus tard, les séparer que de multiples modèles.

Votre document principal-modèle et un résumé-modèle. Le chargement initial tire dans le document-modèle, puis tire dans le résumé-modèle et l'insère dans la compilation des DOM à partir du premier modèle. Ensuite, vous pouvez recharger le deuxième modèle à tout moment. Voir les étapes suivantes:

1) la Charge initiale du modèle, illustré ci-dessous:

<script type="text/template" id="document-template">
    <div id="document">
        <h1><%= name %></h1>
        <ul class="items">
            <% _.each(items, function(item) { %> 
                <li><%= item %></li>
            <% }); %>
        </ul>
    </div>
</script>

2) une Fois que c'est compilé dans le DOM, charger le deuxième modèle via trait de soulignement, illustré ci-dessous:

<script type="text/template" id="summary-template">
    <div id="summary">
        <p>Total items: <%= totalitems %></p>
    </div>
</script>

3) $("#document").append(summaryTemplate), ou quelle que soit la variable est tenue le modèle compilé.

4) Répétez les étapes 2 et 3 de tout temps, vous devez recharger le résumé, à l'exception d'abord supprimer l'existant $("#sommaire") avant d'ajouter à nouveau

Vous pouvez utiliser la même stratégie pour les articles, assurez-vous d'utiliser le bon sélecteurs jQuery/méthodes de sorte que vous êtes en écrasant la divs dans le bon ordre, comme append ne fonctionne que pour ajouter quelque chose à la fin d'un élément.