¿Cómo se definen los parciales de bigote en HTML?

este es mi html:¿Cómo se definen los parciales de bigote en 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>

como se puede ver, quiero volver a utilizar la parte #li-templ, pero parece que tengo que escribirlo en un archivo llamado li-templ.mustache entonces puedo incluirlo como partial?
¿puedo simplemente definirlos en el único archivo html?

Fuente

2011-11-10 wong2

Supongo que está utilizando el sabor JS de Moustache.

En moustache.js se puede pasar un objeto de parciales como tercer argumento a Mustache.render. El objeto debe estar codificado por el nombre del parcial, y su valor debe ser el texto parcial.

Es necesario:

definir algunos datos ficticios para el nombre
Obtenga su plantilla parcial por conseguir el HTML de # li-templ
crear un objeto con el nombre del parcial (li-templ) como la clave
Dile a Moustache que muestre cada plantilla con los datos de la vista, incluida tu parcial

He aquí algunos jQuery para hacer precisamente eso:

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

Aquí hay una jsFiddle de todo trabajadora http://jsfiddle.net/maxbeatty/EYDfP/

Fuente

2012-01-19 01:03:36 maxbeatty

Hola, vale la pena señalar que 'Mustache.to_html' ahora ha sido reemplazado por' Mustache.render' (la definición de la función sigue siendo la misma) – Matt

¿Soy yo o el google-bot sigue los enlaces de las plantillas incrustadas de esta manera? ¿Podría ser debido a la entrada type = "text/html"?¿Serían las consecuencias de usar algo como: type = "text/bigote-template"? – pointernil

Dado que Moustache es de github, no hay más ejecución ya que el tipo MIME es texto, [aquí] (http://jsfiddle.net/anandchakru/19z7gf6n/) es un violín modificado, en caso de que alguien quiera referirse. –

ICanHaz.js (ICH) le puede ayudar con esto.

ICanHaz.js: Un enfoque simple/potente para realizar plantillas del lado del cliente con Mustache.js.

He encontrado que mezclar plantillas (en etiquetas de scripts) con el código HTML común en la página se mete con mi editor de código (resaltado de sintaxis, sangría, etcétera). Cargarlos como un servidor separado mantiene su HTML limpio.

Consulte this ICH pull request for automatic loading of <script type="text/html" src="my-templates.html"></script> from your server en una plantilla por archivo.

Usted también podría load more than one template per remote HTML file this utilizando código simple como:

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

O, si desea ICH para cargar de forma automática a partir de URL de su página:

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

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

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

Fuente

2012-11-16 13:38:14

¿Cómo se definen los parciales de bigote en HTML?

Respuesta

Cuestiones relacionadas