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