code - jsrender for array

Almacenar una plantilla jsRender en un archivo js separado

Question

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

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

algo como esto

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

Apreciaré cualquier comentario o sugerencia.

Gracias

Answer 1

Aquí hay 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 se volverá a cargar.

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

Úsalo 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.''
});
});
});

Answer 2

En caso de que estés intentando cargar plantillas externas desde un archivo local, como lo estaba yo, déjame ahorrarte algo de frustración. No use jQuery $.get() como se recomienda en la respuesta de balexandre .

Use $.ajax() y configure async: true y dataType: text ; de lo contrario, le elem.getAttribute is not a function un error: elem.getAttribute is not a function . Vea mi respuesta a Error al cargar plantillas jsrender a través de AJAX para más detalles.

Answer 3

Recientemente me encontré con este problema a mí mismo. Después de revisar el código de jsRender y estudiar otras bibliotecas de javascript, decidí escribir mi propia biblioteca que simplificaría la carga de plantillas externas para poder adjuntar plantillas a una página html con la etiqueta <link> y representarlas simplemente con la inclusión de. js archivo. Si desea comprobarlo, he publicado el código en github con ejemplos:

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

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

¡Disfrutar!

Answer 4

Sí, puedes lograr esto (uso esto cada vez).

supongamos que tiene sus plantillas en una carpeta de template y se llama, por ejemplo _productDetails.tmpl.html

en tu página usas jQuery $.get() para jalarlo y cargarlo 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 usted pasa un objeto item que contendrá las 3 propiedades, como:

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

Puedes tener una buena clase de utilidades 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 puede llamar fácilmente a my.utils.renderExtTemplate(item);

Answer 5

en mi experiencia, no necesita trabajar con ese problema, solo necesita adjuntar la plantilla a la página antes de usarla. ver código abajo.

<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 que solicite un archivo ajax cada vez que quiera renderizar una plantilla js