2012-03-23 15 views
5

¿Puedo poner mi plantilla en un archivo .html separado y solo hacer referencia a ellos en mi index.html?plantilla externa de html para underscore.js y backbone.js

index.html:

<script type="text/template" id="item-list" src="item-list-tmpl.html"></script> 

elemento-lista-tmpl.html:

<div><%= ItemDescription %><%= ItemCode %></div> 

lo intenté pero el problema es que no muestra la plantilla en index.html pero cargas en el lugar adecuado (visto que usando firebug)

ACTUALIZACIÓN

encontrado una posible solución, pero es no recomendado para el entorno de producción.

+0

Parece que no hay una solución fácil para esto. El enfoque [require.js] (http://requirejs.org/) comúnmente [que aparece como una solución] (http://backbonetutorials.com/organizing-backbone-using-modules/), nunca lo intenté, pero me parece demasiado exceso de ingeniería. Espero que alguien venga con una solución fácil y directa. – fguillen

+0

Si tiene una solución, incluso para su propia pregunta, creo que es mejor crear una respuesta independiente, para que la gente pueda comentarla y votarla. Y también puedes elegirla como la respuesta correcta. – fguillen

Respuesta

7

Tienes esto desde http://coenraets.org/blog/2012/01/backbone-js-lessons-learned-and-improved-sample-app/#comment-35324

Crear un archivo js separado para esto y lo llaman antes de que sus archivos js para el modelo, la recogida y puntos de vista.

tpl = { 

// Hash of preloaded templates for the app 
templates:{}, 

// Recursively pre-load all the templates for the app. 
// This implementation should be changed in a production environment. All the template files should be 
// concatenated in a single file. 
loadTemplates:function (names, callback) { 

    var that = this; 

    var loadTemplate = function (index) { 
     var name = names[index]; 
     //console.log('Loading template: ' + name); 
     $.get('templates/' + name + '.html', function (data) { 
      that.templates[name] = data; 
      index++; 
      if (index < names.length) { 
       loadTemplate(index); 
      } else { 
       callback(); 
      } 
     }); 
    } 

    loadTemplate(0); 
}, 

// Get template by name from hash of preloaded templates 
get:function (name) { 
    return this.templates[name]; 
} 

}; 

Después de que agrega esto a su router

tpl.loadTemplates(['filename-of-your-external-html-file'], function() { 
app = new AppRouter(); 
Backbone.history.start(); 
}); 

Eso debería hacerlo. Pero, nuevamente, no es recomendable para el entorno de producción, ya que habrá cientos para obtener una solicitud y puede paralizar su aplicación.

+0

¿Puedo cargar plantillas según sea necesario en el entorno de producción, en lugar de cargar todo en uno? –