Cómo guardar en caché plantillas de bigote?

Me gustaría almacenar en caché mustache plantillas.Cómo guardar en caché plantillas de bigote?

Yo sé que podría incluir mustache plantillas directamente como aquí:

<script id="mustache-template" type="text/html"> 
<h1>{{title}}</h1> 
</script>

y llamar a aquellos con Javascript, como este:

var html, template, data; 
data = { 
    title : "Some title" 
}; 
template = document.getElementById('mustache-template').innerHTML; 
html = Mustache.to_html(template, data);

esto no va a plantillas de caché. La única forma que pude averiguar es el uso de las etiquetas de enlace, pero ¿cómo puedo llamar el contenido de la plantilla a través de javascript sin una solicitud de ajax?

Esto no va a funcionar (por supuesto) ...

HTML

<link type="text/html" href="/mustache/template.tpl" id="mustache-template" />

Javascript

document.getElementById('mustache-template').innerHTML;

Fuente

2011-06-09 kaulusp

Esta pregunta es muy interesante! Tuve el mismo problema hace varios meses cuando comencé a usar el bigote para las plantillas de front-end 'enormes' dentro de un proyecto de rieles.

que terminó con la siguiente solución ...

plantillas de bigote se encuentran dentro de una carpeta pública:

/public/templates/_template_name.tpl

Cada vez que necesito una plantilla que tienen este helper getTemplate que hace algunas cosas (hay algunas mootools, pero también hay comentarios):

// namespace.templatesCache is an object ({}) defined inside the main app js file 

var 
    needXHR = false, // for callback function 
    templateHTML = ""; //template html 

if(!(templateHTML = namespace.templatesCache[template_name])){ //if template is not cached 

    templateHTML = (this.helpers.supportLocalStorage) ? localStorage.getItem(template_name) : ""; //if browser supports local storage, check if I can retrieve it 

    if(templateHTML === "" || templateHTML === null){ // if I don't have a template (usually, first time), retrieve it by ajax 

     needXHR = true; 

     new Request.HTML({ //or jQuery's $.get(url /*, etc */) 

      url: namespace.URLS.BASE+"templates/_"+template_name+".tpl", // url of the template file 

      onSuccess : function(t, e, html, js){ 

       namespace.templatesCache[template_name] = html; //cache it 

       if(_this.helpers.supportLocalStorage){ //and store it inside local storage, if available 
        localStorage.setItem(template_name,html); 
       } 

       //call callback  
      } 
     }).get(); 

    }else{ //retrieved by localStorage, let's cache it 

     namespace.templatesCache[template_name] = templateHTML; 

    } 

} 

if(!needXHR){ // I retrieved template by cache/localstorage, not by Ajax 

    //call callback  

}

y yo llamo a este ayudante de esta manera:

namespace.helpers.getTemplate('template_name', function(templateHTML){ 
    // the callback function 
});

se puede observar que la primera vez que el usuario necesita la plantilla, hay una solicitud desincronizado (se puede hacer una solicitud de sincronización u si no quieren para envolver algún otro código dentro de la devolución de llamada)

espero que podía ayudar y me encantaría recibir retroalimentación/sugerencias con respecto a este asunto :)

Fuente

2011-06-09 23:47:58 stecb

Se podría tratar de cargar la plantilla en una iframe que contiene una página HTML (que se almacenará en caché) con todos sus script etiquetas dentro.

Luego puede leerlos desde la página principal, o bien, puede insertarlos desde el iframe a la ventana parent.

Eso es lo que hago cuando se utilizan plantillas pure.js

Fuente

2011-06-09 14:32:34 Mic

¡Gracias! Buena solución, pero esto me parece un poco raro. Todas las demás sugerencias son bienvenidas. – kaulusp

He hecho algunos círculos alrededor de este problema. Una vez que pase el trauma: 'iframe' es algo que no debe usar, todo está bien. Pero espero cualquier otra respuesta que obtengas. – Mic

lo que diga no va a funcionar, por supuesto, debido a que la atributo innerHTML del liknek el ement no le dará los contenidos del enlace.

Puede utilizar Chevron para cargar plantillas externas de los enlaces de este modo:

se agrega en usted plantilla de un enlace a su archivo de plantilla:

<link href="path/to/template.mustache" rel="template" id="templateName"/>

Luego, en que JS puede hacer que su plantilla así:

$("#templateName").Chevron("render", {name: "Slim Shady"}, function(result){ 
    // do something with 'result' 
    // 'result' will contain the result of rendering the template 
    // (in this case 'result' will contain: My name is Slim Shady) 
});

Los documentos de Chevron dará más ejemplos

Fuente

2012-08-05 03:37:14

Cómo guardar en caché plantillas de bigote?

Respuesta

Cuestiones relacionadas