vista backbone con ID dinamico

Question

Mi sono appena accorto di aver frainteso l'attributo el di uno Backbone.View. Fondamentalmente le mie visualizzazioni richiedono attributi dinamici id in base all'attributo del modello. Pensavo di avere questo bel lavoro perché semplicemente specificato che nel mio modello:

<script type="text/template" id="item_template"> 
    <li class="item" id="{{identifier}}"> 
    <span class="name">{{name}}</span> 
    </li> 
</script> 

Tuttavia, mi sono reso conto che quello che Backbone è stato effettivamente facendo stava mettendo questo modello compilato in un altro elemento, div per impostazione predefinita. Ho imparato di più su questo leggendo la documentazione, ma sono ancora confuso su come creare un dinamico id.

Preferibilmente, mi piacerebbe trovare un modo per rendere tale che le cose nel modello di cui sopra serva come il mio el, dal momento che ha già tutto ciò che voglio, ma non so se è possibile. Quindi mi chiedo se, semplicemente, ci sia un modo per specificare un attributo dinamico id.

Ho provato a impostarlo nel metodo initialize, this.id = this.model.get('attr') ma non sembra avere alcun effetto, probabilmente perché ormai è già troppo tardi.

Quello che sto facendo attualmente è solo utilizzando jQuery per aggiungere il id durante render():

this.el.attr(id: this.model.get('identifier')); 

funziona, ma, naturalmente, sto semplicemente chiedendo se c'è un modo preferito per farlo attraverso Backbone.

Answer 1

Sì, c'è un modo standard per fare questo in Backbone. È possibile passare id al costruttore View. Puoi anche refactoring il tuo modello in modo che Backbone crei per te l'elemento genitore <li>. Prova questo modello più semplice:

<script type="text/template" id="item_template"> 
    <span class="name">{{name}}</span> 
</script> 

E aggiungere questi alla vostra vista:

myView = Backbone.View.extend({ 
    className: "item", 
    tagName: "li" 
}) 

E un'istanza in questo modo:

var view = new YourView({ 
    model: mymodel, 
    id: mymodel.get('identifier') // or whatever 
}) 

Buona fortuna!

Answer 2

Quando si crea la visualizzazione, passare in un selettore che permette la vista trovare il vostro elemento DOM pre-renderizzati esistente:

var id = "1234"; 
var view = YourView({el: '#'+id}); 

Answer 3

C'è un altro approccio. Ho trovato più comodo che passare id ogni volta che crei un'istanza della tua vista.

Template:

<script type="text/template" id="item_template"> 
     <span class="name">{{name}}</span> 
</script> 

Vista:

var MyView = Backbone.View.extend({ 
    tagName: 'li', 
    attributes: function(){ 
     return { 
      id: this.model.get('identifier'), 
      class: 'item'//optionally, you could define it statically like before 
     } 
    } 
})