Backbone js: come rimuovere il tag extra in vista?

Question

Ho la seguente configurazione:

<div class="row"> 
    <div></div> 
    .... 
</div> 

e alla seguente vista:

var TestView = Backbone.View.extend({ 
    tagName: "div", 
    template: $("#tests_template"), 
    initialize: function() { 
     _.bindAll(this, 'clickbtn'); 
    }, 
    events: 
    { 
     "click .btn": "clickbtn" 
    }, 
    render: function() { 
      .... 
      { 
     }); 

Il problema è, esso produce il seguente output:

<div><div class="row">...</div></div> 

Come faccio a sbarazzarsi di il div esterno? Ho provato a rimuovere la proprietà tagName dalla vista ma mette ancora un div?

Answer 1

Cambia il modello per sbarazzarsi del div esterno:

<div></div> 
    .... 

Poi, dicono la vista per creare il div con un nome di classe:

tagName: "div", 
className: "row" 

O se si desidera mantieni il modello attuale, quindi indica a View quale el utilizzare (supponendo che esista già un posto nella tua pagina):

var testView = new TestView({el: $(".row")}); 

EDIT Hai chiesto se è possibile farlo nell'inizializzatore? Certo, ma avresti bisogno di fare in modo che si aggancia gli eventi:

initialize: function() { 
    this.el = $(".row"); 
    this.delegateEvents(); 
    _.bindAll(this, 'clickbtn'); 
} 

Onestamente, però, le prime due opzioni sono più de-accoppiato IMO.

Answer 2

Un'altra opzione che non richiede la modifica del modello è quello di utilizzare setElement

setElement view.setElement (elemento)

Se vuoi applicare una vista Backbone ad un DOM diverso elemento, usa setElement, che creerà anche il riferimento $ el memorizzato nella cache e sposta gli eventi delegati della vista dal vecchio elemento a quello nuovo.

Ciò consentirà di ignorare completamente tagName. Puoi lasciare tagName fuori dalla tua definizione di Vista (per default dividerà comunque). Inoltre, non devi preoccuparti di delegare manualmente i tuoi eventi o richiedere che un selettore di elementi sia conosciuto in anticipo come indicato nella risposta da @Brian Genisio, sebbene anche questi altri metodi funzionino.

render: function() { 
    this.setElement(this.template(this.model.toJSON())); 
    return this; 
}