Comment définir les partiels de moustache en HTML?

voici mon code html:

<script type="text/html" id="ul-template">
    <ul id="list">
        {{> li-templ}}
    </ul>
</script>  

<script type="text/html" id="ul-template2">
    <div id="list2">
        {{> li-templ}}
    </div>
</script>    

<script type="text/html" id="li-templ">
    <p>{{ name }}</p>
</script>  

comme vous pouvez le voir, je veux réutiliser le #li-templ partie, mais il semble que je dois l'écrire dans un fichier appelé li-templ.mustache ensuite, je peux l'inclure en tant que partial?

pouvez je viens de les définir dans le fichier html?

25
demandé sur FruitBreak 2011-11-10 12:41:11
la source

2 ответов

je suppose que vous utilisez la saveur JS De La Moustache.

en Moustache.js un objet de partiels peut être passé comme troisième argument à la moustache.rendre. L'objet doit être saisi par le nom du partiel, et sa valeur doit être le texte partiel.

Vous avez besoin de:

  1. définir quelques données factices pour le nom
  2. obtenez votre modèle partiel en obtenant le HTML de # li-templ
  3. Créer un objet avec la nom du partiel (li-templ) comme la clé
  4. dites à la moustache de rendre chaque modèle avec les données de la vue incluant votre

Voici quelques jQuery pour faire ça:

var view = {"name" : "You"},
li = $('#li-templ').html(), 
partials = {"li-templ": li},
ul1 = Mustache.to_html($('#ul-template').html(), view, partials),
ul2 = Mustache.to_html($('#ul-template2').html(), view, partials);;

document.write(ul1, ul2);

Voici un jsFiddle de tout travail- http://jsfiddle.net/maxbeatty/EYDfP/

28
répondu maxbeatty 2012-01-19 05:03:36
la source

ICanHaz.js (ICH) peut vous aider avec ceci.

ICanHaz.js: une approche simple / puissante pour faire des templates côté client avec Moustache.js.

j'ai trouvé que le mélange des gabarits (dans les balises de scripts) avec le HTML ordinaire dans la page perturbe mon éditeur de code (surlignage syntaxique, indentation etcetera). Les charger comme un serveur séparé garde votre HTML propre.

découvrez this ICH pull request pour le chargement automatique de <script type="text/html" src="my-templates.html"></script> à partir de votre serveur pour un modèle par fichier.

Vous pouvez aussi charger plus qu'un seul modèle par distance fichier HTML utilisant un code simple comme:

function getTemplates(url) {
    $.get(url, function (response) {
        $('template', response).each(function () {
           ich.addTemplate(this.id, $(this).text());
        });
    });
}

Ou, si vous le souhaitez ICH de les charger automatiquement à partir des url dans votre page:

<head>
    <link rel="templates" type="text/html" href="my-templates.html">
</head>
$("link[type=templates]").each(function (index, link) {
    getTemplates(link.attr("href"));
});

Dans votre my-templates.html

<templates>
    <template id="ul-template">
        <ul id="list">
            {{> li-templ}}
        </ul>
    </template>  

    <template id="ul-template2">
        <div id="list2">
            {{> li-templ}}
        </div>
    </template>    

    <template id="li-templ">
        <p>{{ name }}</p>
    </template> 
</templates>
5
répondu Joel Purra 2012-11-16 17:38:14
la source

Autres questions sur