Backbone.js plantillas separadas del archivo html

Question

Estoy trabajando en una aplicación Backbone.js. Estamos utilizando plantillas de underscore.js para cargar los contenidos en la Vista. Actualmente tenemos todas las plantillas dentro del archivo index.html, por lo que el tamaño del archivo va en aumento. ¿Alguien puede ayudarme a encontrar una solución para separar estas plantillas de otros archivos? Gracias por adelantado.

EDITAR

Recientemente he visitado el Backbone patterns y me encontré con que podemos utilizar JST templates para crear archivos de plantillas separadas para cada plantilla. Explicaron que podemos crear un archivo jst.js a poner todo nuestro código de la plantilla:

// http://myapp.com/javascripts/jst.js 
window.JST = {}; 

window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..." 
); 

window.JST['person/edit'] = _.template(
    "<form method='post'><input type..." 
); 

<script src="http://myapp.com/javascripts/jst.js"></script> 

Ahora todas las plantillas se encuentran en el archivo jst.js. Pero si usted tiene un montón de plantillas y que desea mover las plantillas para separar los archivos se pueden crear archivos de plantillas separadas:

// http://myapp.com/javascripts/jst.js 
window.JST = {}; 

//http://myapp.com/javascripts/contactPerson.template.js 
window.JST['person/contact'] = _.template(
    "<div class='contact'><%= name %> ..." 
); 

//http://myapp.com/javascripts/editPerson.template.js 
window.JST['person/edit'] = _.template(
    "<form method='post'><input type..." 
); 

<script src="http://myapp.com/javascripts/jst.js"></script> 
<script src="http://myapp.com/javascripts/contactPerson.js"></script> 
<script src="http://myapp.com/javascripts/editPerson.js"></script> 

Por favor, hágamelo saber si hay alguna idea más simple. ¡Gracias!

Answer 1

Puede tener plantillas en archivos html separados y puede cargarlos como texto usando requirejs. Hay un complemento llamado text que te ayudará a hacer eso.

Ejemplo:

define([ 
    'text!templates/sampleTemplate.html' 
], function(tmpl){ 

    var Sampleview = Backbone.View.extend({ 
     id: 'sample-page', 

     template: _.template(tmpl), 

     render: function() { 
     $(this.el).html(this.template()); 
     return this; 
    } 
    }); 
    return SampleView; 
}); 

el archivo HTML "plantillas/sampleTemplate.html" será tomado de la ruta raíz especificada en la configuración require.js

Answer 2

Cárguelos mediante xhr. El lib requirejs (requirejs.org) carga dependencias de archivos html de esta manera. Esto funcionará cuando esté en desarrollo, pero las plantillas se deben compilar en los archivos js en producción.