Come definire i baffi parziali in HTML?

questo è il mio html:Come definire i baffi parziali in 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>

come si può vedere, voglio riutilizzare la parte #li-templ, ma sembra che devo scrivere in un file chiamato li-templ.mustache allora posso includerlo come partial?
posso semplicemente definirli nel singolo file html?

fonte

2011-11-10 wong2

Suppongo che tu stia utilizzando il sapore JS di Moustache.

In mustache.js un oggetto di partial può essere passato come terzo argomento a Mustache.render. L'oggetto dovrebbe essere digitato dal nome del partial e il suo valore dovrebbe essere il testo parziale.

È necessario:

definire alcuni dati fittizi per il nome
Prendi il modello parziale da ottenere il codice HTML di # Li-templ
Creare un oggetto con il nome del partial (li-templ) come chiave
Dillo a Mustache per rendere ogni modello con i dati di visualizzazione compreso il tuo parziale

Ecco alcuni jQuery per fare proprio questo:

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

Ecco un jsFiddle di tutto lavoratrice http://jsfiddle.net/maxbeatty/EYDfP/

fonte

2012-01-19 01:03:36 maxbeatty

Ciao, vale la pena notare che 'Moustache.to_html' è stato sostituito con' Moustache.render' (la definizione della funzione rimane la stessa) – Matt

È solo per me, o è il google-bot che segue i collegamenti all'interno dei template incorporati in questo modo? Potrebbe essere dovuto alla voce type = "text/html"?Le conseguenze sarebbero l'utilizzo di qualcosa come: type = "text/mustache-template"? – pointernil

Poiché Mustache proviene da github, non più un'esecuzione poiché il tipo MIME è testo, [qui] (http://jsfiddle.net/anandchakru/19z7gf6n/) è un violino modificato, nel caso in cui qualcuno voglia fare riferimento. –

ICanHaz.js (ICH) può aiutare con questo.

ICanHaz.js: Un approccio semplice/potente per eseguire il template sul lato client con Mustache.js.

Ho trovato che i modelli di missaggio (nei tag di script) con l'ordinario HTML nella pagina danneggiano il mio editor di codice (evidenziazione della sintassi, indentazione eccetera). Caricandoli come un server separato mantiene pulito il tuo HTML.

Verificare this ICH pull request for automatic loading of <script type="text/html" src="my-templates.html"></script> from your server in un modello per file.

Si potrebbe anche load more than one template per remote HTML file this utilizzando il codice semplice come:

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

Oppure, se volete ICH per caricare automaticamente da URL nella tua pagina:

<head> 
    <link rel="templates" type="text/html" href="my-templates.html"> 
</head>

$("link[type=templates]").each(function (index, link) { 
    getTemplates(link.attr("href")); 
});

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

fonte

2012-11-16 13:38:14

Come definire i baffi parziali in HTML?

risposta

Problemi correlati