2012-06-10 13 views
8

La función View.remove() en la red troncal js elimina el elemento del contenedor de la vista del DOM impidiendo la recreación de las vistas que se han eliminado. Cualquier idea de cómo se maneja este escenarioRecreación de una vista eliminada en la red troncal js

Aquí está mi código,

var AttributeView = Backbone.View.extend({ 
     el: $("#attrs"), 
     template:_.template($('#attrs-template').html()), 

     initialize:function() { 
     }, 


     render:function (eventName) { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
      }, 

     dispose:function(eventName){ 
      this.unbind(); 
      this.remove(); 
     }, 

    }); 


var attrView = new AttributeView(); 
.... 
attrView.dispose(); 
//Later on some event I do the below 
attrView = new AttributeView() 
attrView.render(); 

Las dos últimas líneas anteriores no recrean la vista como la div con id = "attrs" no está ya allí.

Respuesta

21

En primer lugar, no es necesario el método de dispose, el estándar remove es suficiente:

var attrView = new AttributeView(); 
//.... 
attrView.remove(); // <--------- Do this instead 
//... 
attrView = new AttributeView() 
attrView.render(); 

En segundo lugar, puede anular remove si la versión estándar no hace lo que necesita. El default implementation simplemente elimina this.el y limpia algunos detectores de eventos:

remove: function() { 
    this.$el.remove(); 
    this.stopListening(); 
    return this; 
}, 

En su caso, desea deshacer todo lo que render hace y eso significa que la limpieza de la HTML dentrothis.el y la eliminación de los eventos llamando undelegateEvents:

remove: function() { 
    this.undelegateEvents(); 
    this.$el.empty(); 
    this.stopListening(); 
    return this; 
}, 

a continuación, puede llamar a attrView.remove() y acabar con él y (new AttributeView()).render() para traerlo de vuelta.

Demostración: http://jsfiddle.net/ambiguous/Pu9a2/3/

+0

Gracias por su respuesta. Pero por alguna razón, un código similar a tu ejemplo no funciona. Creé el http://jsfiddle.net/EnVmN/7/ para ilustrar el problema que tengo. Alguna idea de lo que estoy haciendo mal. Estoy reutilizando su AttributeView, pero agregué ItemView e intento mostrar y eliminar la vista de atributo al hacer clic en editar y eliminar iconos respectivamente. – mzafer

+0

@mzafer: los eventos de una vista solo funcionan en 'el' de la vista y sus elementos secundarios, su ItemView se procesaba en' # elementos' pero eso no era 'el' de ItemView, por lo que los eventos de clic en sus iconos no se enviaban a el ItemView: http://jsfiddle.net/ambiguous/KjC6x/ –

+0

Muchas gracias, funciona ahora :) Pasé casi dos días en esto. – mzafer

0

Tome un vistazo a LayoutManager para Backbone Vistas, que entiende que cuando se quita una vista (padre - en el sentido de la contención y no a objetos jerarquía de los sentidos), sus subvistas también deben ser eliminados.

Cuestiones relacionadas