Backbone js: cómo quitar la etiqueta adicional a la vista?

Question

tengo la siguiente plantilla:

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

y los próximos:

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

El problema es, que produce la siguiente salida:

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

¿Cómo me deshago de ¿El div externo? Intenté eliminar la propiedad tagName de la vista, pero aún así se coloca un div?

Answer 1

cambiar la plantilla para deshacerse de la div exterior:

<div></div> 
    .... 

Entonces, digo la vista para crear el div con un nombre de clase:

tagName: "div", 
className: "row" 

O si quieres conserve la plantilla actual, luego diga a la vista qué uso tiene el (suponiendo que ya exista algún lugar en su página):

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

EDIT ¿Ha preguntado si puede hacer esto en el inicializador? Claro, pero lo que se necesita para asegurarse de que usted engancha los acontecimientos:

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

Honestamente, sin embargo, las dos primeras opciones son más desacoplado de la OMI.

Answer 2

Otra opción que no requiere la modificación de la plantilla es usar setElement

setElement view.setElement (elemento)

Si desea solicitar una vista Backbone a un DOM diferente elemento, use setElement, que también creará la referencia $ el en caché y moverá los eventos delegados de la vista desde el elemento anterior al nuevo.

Esto le permitirá omitir completamente tagName. Puedes dejar tagName fuera de tu definición de vista (de todos modos está en div). Tampoco tiene que preocuparse de delegar manualmente sus eventos o requerir que un selector de elementos sea conocido de antemano como se menciona en la respuesta de @Brian Genisio, aunque esos otros métodos también funcionarán.

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