Almacenar una plantilla jsRender en un archivo js diferente

Question

¿Es posible almacenar una plantilla jsRender en un archivo separado?

Quiero almacenarlo en un archivo separado y hacer una referencia en mi página.

algo como esto

<script id="templateName" type="text/x-jsrender" src="thisIsTheTemplate.js"></script> 

voy a apreciar cualquier commemnts o sugerencias.

Gracias

Answer 1

Sí, se puede lograr esto (yo uso esto cada vez).

vamos a suponer que usted tiene sus plantillas en una carpeta template y se llama, por ejemplo _productDetails.tmpl.html

en su página utiliza jQuery $.get() para tirar de él y cargar en la plantilla, como:

var renderExternalTmpl = function(item) { 

    var file = '../templates/_' + item.name + '.tmpl.html'; 
    $.when($.get(file)) 
    .done(function(tmplData) { 
     $.templates({ tmpl: tmplData }); 
     $(item.selector).html($.render.tmpl(item.data)); 
    });  
} 

y se pasa un objeto bruja item contendrá los 3 propiedades, como:

renderExternalTmpl({ name: 'productDetails', selector: '#items', data: {} }) 

Usted puede tener una buena utilidades clase para mantener todo esto:

var my = my || {}; 
my.utils = (function() { 
    var getPath = function(name) { 
     return '../templates/_' + name + '.tmpl.html'; 
    }, 
    renderExtTemplate = function(item) { 

     var file = getPath(item.name); 
     $.when($.get(file)) 
     .done(function(tmplData) { 
      $.templates({ tmpl: tmplData }); 
      $(item.selector).html($.render.tmpl(item.data)); 
     });  
    }; 

    return { 
     getPath: getPath, 
     renderExtTemplate: renderExtTemplate 
    }; 
}); 

y se puede llamar fácilmente my.utils.renderExtTemplate(item);

Answer 2

poco me encontré con este problema a mí mismo. Después de examinar el código jsRender y estudiar otras bibliotecas de JavaScript, decidí escribir mi propia biblioteca que simplificaría la carga de plantillas externas para que se pudieran adjuntar plantillas a una página html usando la etiqueta <link> y renderizarlas simplemente incluyendo el archivo .js . Si desea comprobarlo, he publicado el código en GitHub con ejemplos:

https://github.com/stevenmhunt/tmpl.loader

Esta biblioteca trabaja con jsRender, así como cualquier código capaz de procesar una plantilla.

¡Disfrútalo!

Answer 3

En caso de que intente cargar plantillas externas desde un archivo local, como yo, permítame ahorrarle un poco de frustración. No use jQuery $.get() como se recomienda en balexandre's answer.

Use $.ajax(), y establezca async: true y dataType: text, de lo contrario, le dará un error: elem.getAttribute is not a function. Ver mi respuesta al Error when loading jsrender templates through AJAX para más detalles.

Answer 4

En mi experiencia, no necesita trabajar con ese problema, solo necesita agregar la plantilla a la página antes de usarla. ver el código a continuación.

<div id="all_template"></div> 
<script> 
var file = '/tmpl/all.tmpl.html'; 
$.ajax({ 
    url: file, 
    async: false, 
    type : "GET", 
    dataType: 'text', 
    cache: true, 
    success: function(contents) 
    { 
    $("#all_template").append(contents);//append all your template to the div 
    } 
}); 
</script> 
<script> 
var data = {}; 
$('#js-template').render(data);//use it as the same old way 
</script> 

de esta manera, no es necesario solicitar un archivo de cada ajax desea reproducir una plantilla JS

Answer 5

Aquí es una función que escribí para cargar una o más plantillas externas a la vez. También almacena en caché las plantillas, de modo que si una ya está cargada, no volverá a cargarse.

function loadTemplates() { 
    var toLoad = [], 
     loadAll = $.Deferred(); 

    $.each(arguments, function(i, templateName) { 
     var filepath = '/path/to/templates/' + templateName + '.html', 
      loadTemplate = $.Deferred(); 

     toLoad.push(loadTemplate); 

     if ($.templates[templateName]) { 
      loadTemplate.resolve(); 
     } else { 
      $.get(filepath , function(html) { 
       var newTemplate = {}; 
       newTemplate[templateName] = html; 
       $.templates(newTemplate); 
      }).fail(function() { 
       throw 'Could not load template at '+filepath; 
      }).done(function() { 
       loadTemplate.resolve(); 
      }); 
     } 
    }) 

    $.when.apply($, toLoad).done(function() { 
     loadAll.resolve(); 
    }); 

    return loadAll; 
} 

Se usa así:

loadTemplates('modal','itemDetail', 'itemsList').done(function() { 
    // do stuff when all templates are loaded 
    $('#viewItemDetail').on('click',function() { 
     $.render.itemDetail({ 
      id:'123', 
      name:'Cool Thing', 
      description:'This thing is really cool.' 
     }); 
    }); 
});