Backbone.js separa i modelli dal file html

Question

Sto lavorando ad un'applicazione Backbone.js. Utilizziamo i modelli underscore.js per caricare i contenuti nella vista. Attualmente abbiamo tutti i modelli all'interno del file index.html, quindi la dimensione del file sta aumentando. Qualcuno può aiutarmi a trovare una soluzione per separare questi modelli in altri file? Grazie in anticipo.

EDIT

Recentemente ho visitato il Backbone patterns e ho trovato che possiamo usare JST templates per creare file di modelli separati per ogni modello. Hanno spiegato che possiamo creare un file jst.js di mettere tutto il nostro codice di modello:

// 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> 

Ora tutti i modelli sono nel file jst.js. Ma se hai un sacco di modelli e si desidera spostare i modelli per separare i file è possibile creare file di modello separati:

// 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> 

Si prega di farmi sapere se c'è qualche idea più semplice. Grazie!

Answer 1

È possibile avere modelli in file html separati e caricarli come testo utilizzando requirejs. C'è un plugin chiamato text che ti aiuterà a farlo.

Esempio:

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

il file HTML "templates/sampleTemplate.html" sarà presa dal percorso root specificato nella configurazione require.js

Answer 2

Caricalo tramite xhr. Lib requirejs (requirejs.org) carica le dipendenze del file html in questo modo. Questo funzionerà durante lo sviluppo, ma i modelli dovrebbero essere compilati nei file js in produzione.