Come si creano dinamicamente gli elementi di visualizzazione Backbone?

Question

Mi piacerebbe creare alcuni elementi di vista in un'applicazione Backbone js in modo dinamico. Quando viene inizializzata una nuova vista, voglio che inserisca il nuovo elemento nel DOM, memorizzi il riferimento all'elemento in view.el e deleghi gli eventi come al solito.

Capisco che posso inserire il mio html e quindi impostare una vista con el: "# test", ma questo sembra eccessivo per modali e altre viste che non sono centrali per l'applicazione web. C'è un modo prescritto per fare questo mi manca nei documenti? Sto solo fraintendendo il modo in cui le viste dovrebbero funzionare?

Answer 1

Una vista backbone genererà un el per te, senza che tu debba fare nulla. Per impostazione predefinita, crea un <div>. Puoi comunque generare qualsiasi nome di tag che desideri. Dopo aver istanziato la vista, implementare un metodo render nella vista e compilare il codice el con il codice HTML.

MyView = Backbone.View.extend({}); 

var v = new MyView(); 
console.log(v.el); // => "<div></div>" 


// define your own tag, and render contents for it 

MyTagView = Backbone.View.extend({ 
    tagName: "ul", 

    render: function(){ 
    this.$el.html("<li>test</li>"); 
    } 
}); 

var v2 = new MyTagView(); 
v2.render(); 
console.log(v2.el); // => "<ul><li>test</li></ul>" 

E 'pratica comune di utilizzare un modello di sistema per il rendering HTML del tuo vista, come modello Underscore.js, manubrio, o una qualsiasi delle altre dozzina o più template JavaScript modello motori.

Una volta ottenuto il contenuto generato dalla vista, è necessario inserirlo nel DOM da qualche parte prima che sia visibile. Questo è solitamente fatto con jQuery o un altro plugin:

$("#some-element").html(v2.el);