Plantilla externa en subrayado

Yo uso la plantilla de subrayado . ¿Es posible adjuntar un archivo externo como plantilla ?

En Backbone View tengo:

 textTemplate: _.template( $('#practice-text-template').html() ),

 initialize: function(){                                            
  this.words = new WordList;            
  this.index = 0;
  this.render();
 },

En mi html es:

<script id="practice-text-template" type="text/template">
   <h3>something code</h3>
</script>

Funciona bien. Pero necesito una plantilla externa . Lo intento:

<script id="practice-text-template" type="text/template" src="templates/tmp.js">

o

textTemplate: _.template( $('#practice-text-template').load('templates/tmp.js') ),

o

$('#practice-text-template').load('templates/tmp.js', function(data){ this.textTemplate = _.template( data ) })

Pero no funcionó.

EDITAR: Esta respuesta es antigua y obsoleta. Lo eliminaría, pero es la respuesta "aceptada". Inyectaré mi opinión en su lugar.

No recomendaría hacer esto nunca más. En cambio, separaría todas las plantillas en archivos HTML individuales. Algunos sugerirían cargarlos de forma asíncrona (Require.js o una especie de caché de plantillas). Eso funciona bien en proyectos pequeños, pero en proyectos grandes con muchas plantillas, te encuentras haciendo un montón de pequeñas solicitudes asíncronas en la carga de la página que realmente no me gusta. (ugh ... ok, puedes solucionarlo con Require.js precompilando tus dependencias iniciales con r.js, pero para las plantillas, todavía me parece mal)

Me gusta usar una tarea gruñona (grunt-contrib-jst) para compilar todas las plantillas HTML en un solo archivo templates.js e incluir eso. Obtiene lo mejor de todos los mundos IMO ... las plantillas viven en un archivo, la compilación de dichas plantillas se realiza en el momento de la compilación (no en tiempo de ejecución) y no tiene cien pequeñas solicitudes asíncronas cuando se inicia la página.

Todo lo que hay debajo es basura

Para mí, prefiero la simplicidad de incluir un archivo JS con mi plantilla. Entonces, podría crear un archivo llamado view_template.js que incluye la plantilla como una variable:

app.templates.view = " \
    <h3>something code</h3> \
";

Luego, es tan simple como incluir el archivo de script como uno normal y luego usarlo en su vista:

template: _.template(app.templates.view)

Yendo un paso más allá, en realidad uso coffeescript, por lo que mi código se parece más a esto y evito los caracteres de escape al final de la línea:

app.templates.view = '''
    <h3>something code</h3>
'''

El uso de este enfoque evita la acumulación en require.js donde realmente no es necesario.

Aquí hay una solución simple:

var rendered_html = render('mytemplate', {});

function render(tmpl_name, tmpl_data) {
    if ( !render.tmpl_cache ) { 
        render.tmpl_cache = {};
    }

    if ( ! render.tmpl_cache[tmpl_name] ) {
        var tmpl_dir = '/static/templates';
        var tmpl_url = tmpl_dir + '/' + tmpl_name + '.html';

        var tmpl_string;
        $.ajax({
            url: tmpl_url,
            method: 'GET',
            dataType: 'html', //** Must add 
            async: false,
            success: function(data) {
                tmpl_string = data;
            }
        });

        render.tmpl_cache[tmpl_name] = _.template(tmpl_string);
    }

    return render.tmpl_cache[tmpl_name](tmpl_data);
}

Usar "async: false" aquí no es una mala manera porque, en cualquier caso, debe esperar hasta que se cargue la plantilla.

Entonces, la función "render"

1. le permite almacenar cada plantilla en un archivo html separado en un directorio estático
2. es muy ligero
3. compila y almacena en caché plantillas
4. lógica de carga de plantillas de resúmenes. Por ejemplo, en el futuro puede usar plantillas precargadas y precompiladas.
5. es fácil de usar

[Estoy editando la respuesta en lugar de dejar un comentario porque creo que esto es importante.]

si las plantillas no se muestran en la aplicación nativa , y usted ve HIERARCHY_REQUEST_ERROR: DOM Exception 3, mire la respuesta de Dave Robinson a ¿Qué puede causar exactamente un error "HIERARCHY_REQUEST_ERR: DOM Exception 3"? .

Básicamente, debes agregar

dataType: 'html'

a la solicitud $ .ajax.

Este mixin permite generar una plantilla externa mediante subrayado de manera muy sencilla: _.templateFromUrl(url, [data], [settings]). Método API es casi lo mismo que el subrayado _.template () . Almacenamiento en caché incluido.

_.mixin({templateFromUrl: function (url, data, settings) {
    var templateHtml = "";
    this.cache = this.cache || {};

    if (this.cache[url]) {
        templateHtml = this.cache[url];
    } else {
        $.ajax({
            url: url,
            method: "GET",
            async: false,
            success: function(data) {
                templateHtml = data;
            }
        });

        this.cache[url] = templateHtml;
    }

    return _.template(templateHtml, data, settings);
}});

Uso:

var someHtml = _.templateFromUrl("http://example.com/template.html", {"var": "value"});

No quería usar require.js para esta tarea simple, así que usé la solución de koorchik modificada.

function require_template(templateName, cb) {
    var template = $('#template_' + templateName);
    if (template.length === 0) {
        var tmpl_dir = './templates';
        var tmpl_url = tmpl_dir + '/' + templateName + '.tmpl';
        var tmpl_string = '';

        $.ajax({
            url: tmpl_url,
            method: 'GET',
            contentType: 'text',
            complete: function (data, text) {
                tmpl_string = data.responseText;
                $('head').append('<script id="template_' + templateName + '" type="text/template">' + tmpl_string + '<\/script>');
                if (typeof cb === 'function')
                    cb('tmpl_added');
            }
        });
    } else {
        callback('tmpl_already_exists');
    }
}

require_template('a', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'a' rendering
    }
});
require_template('b', function(resp) {
    if (resp == 'tmpl_added' || 'tmpl_already_exists') {
        // init your template 'b' rendering
    }
});

¿Por qué agregar plantillas al documento, en lugar de almacenarlas en un objeto javascript? Debido a que en la versión de producción me gustaría generar un archivo html con todas las plantillas ya incluidas, por lo que no necesitaré hacer ninguna solicitud adicional de ajax. Y al mismo tiempo, no necesitaré realizar ninguna refactorización en mi código, ya que uso

this.template = _.template($('#template_name').html());

en mis puntos de vista Backbone.

Esto podría estar ligeramente fuera de tema, pero podría usar Grunt (http://gruntjs.com/), que se ejecuta en node.js (http://nodejs.org/, disponible para todas las plataformas principales) para ejecutar tareas desde línea de comando. Hay un montón de complementos para esta herramienta, como un compilador de plantillas, https://npmjs.org/package/grunt-contrib-jst . Consulte la documentación en GitHub, https://github.com/gruntjs/grunt-contrib-jst . (También deberá comprender cómo ejecutar el administrador de paquetes de nodos, https://npmjs.org/ . No se preocupe, es increíblemente fácil y versátil).

Luego puede mantener todas sus plantillas en archivos html separados, ejecutar la herramienta para precompilarlas todas con subrayado (lo que creo que es una dependencia para el complemento JST, pero no se preocupe, el administrador de paquetes de nodo instalará automáticamente las dependencias por usted).

Esto compila todas sus plantillas en un script, digamos

templates.js

Al cargar el script se establecerá un global - "JST" por defecto - que es una matriz de funciones, y se puede acceder de esta manera:

JST['templates/listView.html']()

que sería similar a

_.template( $('#selector-to-your-script-template'))

si coloca el contenido de esa etiqueta de script en (templates /) listView.html

Sin embargo, el verdadero truco es este: Grunt viene con esta tarea llamada 'watch', que básicamente supervisará los cambios en los archivos que ha definido en su archivo grunt.js local (que es básicamente un archivo de configuración para su proyecto Grunt, en javascript ) Si tienes gruñido comienza esta tarea por ti, escribiendo:

grunt watch

desde la línea de comandos, Grunt supervisará todos los cambios que realice en los archivos y ejecutará automáticamente todas las tareas que haya configurado en ese archivo grunt.js si detecta cambios, como el tarea jst descrita anteriormente. Edite y guarde sus archivos, y todas sus plantillas se vuelven a compilar en un solo archivo js, ​​incluso si están distribuidas en varios directorios y subdirectorios.

Se pueden configurar tareas similares para alinear su javascript, ejecutar pruebas, concatenar y minimizar / uglificar sus archivos de script. Y todo puede estar vinculado a la tarea de observación, por lo que los cambios en sus archivos desencadenarán automáticamente una nueva 'compilación' de su proyecto.

Lleva algo de tiempo configurar las cosas y entender cómo configurar el archivo grunt.js, pero vale la pena el tiempo invertido, y no creo que alguna vez vuelvas a una forma de trabajo previa al gruñido.

Creo que esto es lo que podría ayudarte. Todo en la solución gira en torno a la require.jsbiblioteca, que es un cargador de módulos y archivos JavaScript.

El tutorial en el enlace de arriba muestra muy bien cómo se podría organizar un proyecto de red troncal. También se proporciona una implementación de muestra . Espero que esto ayude.

Me interesé en la plantilla de JavaScript y ahora estoy dando los primeros pasos con la red troncal. Esto es lo que se me ocurrió y parece funcionar bastante bien.

window.App = {

    get : function(url) {
        var data = "<h1> failed to load url : " + url + "</h1>";
        $.ajax({
            async: false,
            url: url,
            success: function(response) {
                data = response;
            }
        });
        return data;
    }
}

App.ChromeView = Backbone.View.extend({
    template: _.template( App.get("tpl/chrome.html") ),
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
});

App.chromeView = new App.ChromeView({ el : document.body });
App.chromeView.render();

Tuve que establecer el tipo de datos en "texto" para que funcione para mí:

get : function(url) {
    var data = "<h1> failed to load url : " + url + "</h1>";
    $.ajax({
        async: false,
        dataType: "text",
        url: url,
        success: function(response) {
            data = response;
        }
    });
    return data;
}

Encontré una solución que me funciona usando jQuery.

Agrego el código de plantilla de subrayado, con el método jQuery.load (), al archivo html principal.

Una vez que está allí, lo estoy usando para generar las plantillas. ¡Todo debe suceder sincrónicamente!

El concepto es:

Tengo un código de plantilla de mapa de subrayado:

<!-- MAP TEMPLATE-->
<script type="text/template" id="game-map-template">
    <% _.each(rc, function(rowItem, index){ %>
      <ul class="map-row" data-row="<%- index %>">
        <li class="map-col <%- colItem.areaType ? 'active-area' : '' %>"></li>
        ...
</script>

Y puse ese código en un archivo llamado map-template.html

Después de eso, creo un contenedor para los archivos de plantilla.

<div id="templatesPool"></div>

Luego incluyo ese archivo en mi archivo html principal de esta manera.

En cabeza:

<!-- Template Loader -->
<script> 
    $(function(){
      $("#templatesPool").append($('<div>').load("map-template.html")); 
    });
</script> 

Salud.

Sé que esta pregunta es muy antigua, pero surgió como el primer resultado en una búsqueda en Google de plantillas de subrayado ajax.

Estaba cansado de no encontrar una buena solución para esto, así que creé el mío:

https://github.com/ziad-saab/underscore-async-templates

Además de cargar plantillas de subrayado con AJAX, agrega la funcionalidad <% include%>. Espero que pueda ser útil para alguien.

Estaba un poco incómodo forzando a jQuery a funcionar sincrónicamente, así que modifiqué el ejemplo sincrónico anterior usando promesas. Es casi lo mismo, pero se ejecuta de forma asincrónica. Estoy usando plantillas hbs en este ejemplo:

var asyncRenderHbs= function(template_name, template_data) {
    if (!asyncRenderHbs.template_cache) { 
        asyncRenderHbs.template_cache= {};
    }

    var promise= undefined;

    if (!asyncRenderHbs.template_cache[template_name]) {
        promise= new Promise(function(resolve, reject) {
            var template_url= '/templates/' + template_name;
            $.ajax({
                url: template_url,
                method: 'GET',
                success: function(data) {
                    asyncRenderHbs.template_cache[template_name]= Handlebars.compile(data);
                    resolve(asyncRenderHbs.template_cache[template_name](template_data));
                },
                error: function(err, message) {
                    reject(err);
                }           
            });
        });
    } else {
        promise= Promise.resolve(asyncRenderHbs.template_cache[template_name](template_data));
    }

    return promise;
};

Luego, para usar el html representado:

asyncRenderHbs('some_template.hbs', context)
    .then(function(html) {
        applicationMain.append(html);
        // Do other stuff here after html is rendered...
    })
    .catch(function(err) {
        // Handle errors
    });

NOTA: Según lo discutido por otros, sería preferible compilar todas las plantillas en un solo archivo templates.js y cargarlo al principio en lugar de tener muchas llamadas AJAX sincrónicas pequeñas para obtener plantillas cuando se carga la página web.

Advertencia delantera: aquí hay dragones:

Menciono el enfoque que se muestra a continuación simplemente para ayudar a aquellos que luchan por hacer que las pilas ASP.NET (y marcos similares) funcionen en armonía con el ecosistema de js-libs. No hace falta decir que esta no es una solución genérica. Una vez dicho esto ...

/ endforwardwarning

Si está utilizando ASP.NET, puede externalizar sus plantillas simplemente colocándolas dentro de una o más vistas parciales propias. Aka dentro de su .cshtml:

  @Html.Partial("path/to/template")

Dentro de su template.cshtml:

   // this is razorview and thusly if you ever need to use the @ character in here  
   // you will have to either escape it as @@ or use the html codepoint which is &#64
   // http://stackoverflow.com/questions/3626250/escape-character-in-razor-view-engine
   <script type="text/x-template" id="someId">
        <span class="foo"><%= name %></span>
   </script>

Y ahora puedes usar la plantilla como de costumbre:

  _.template($("#someId").html())({ name: "Foobar" });

Espero que este enfoque tan obvio ayude a alguien a ahorrar una hora de rascarse la cabeza.