tutorial - delegateEvents en backbone.js

backbonejs github

Question

¿Alguien puede explicarme qué hace delegateEvents en backbone.js? La documentación no me ayudó a entender.

Mi caso de uso exacto es:

Tengo una vista principal X con una vista interna Y. Funcionan muy bien, pero si voy a la vista principal Z y luego vuelvo a X (reutilizando, no recreando), los eventos asociados a los elementos hijo Y se pierden. delegateEvents resuelve esto, pero quiero entender por qué.

Answer 1

delegateEvents toma la declaración events: { ... } para su instancia de vista, y vincula los eventos especificados a los elementos DOM especificados, con los métodos de devolución de llamada especificados para manejar los eventos.

Entonces, un árbol DOM que se ve así después de ser renderizado:

<div> 
  <a href="#" id="foo">foo</a>
</div>

Y una vista definida así:

Backbone.View.extend({
  events: {
    "click .foo": "fooClicked"
  },

  fooClicked: function(e){
    // handle the click, here
  },

  render: function(){
    // render the specified HTML, here
  }
});

manejará correctamente haciendo clic en el enlace "foo", para que pueda responder al clic en su código.

El desglose de la declaración de events es: "eventname selector": "callback" donde "nombre de evento" es cualquier evento DOM, como "hacer clic". "selector" es cualquier selector jQuery válido, que se ejecuta contra el elé de su vista para que el elemento DOM vincule el evento. "devolución de llamada" es el nombre del método en esta vista para llamar, cuando el evento para ese elemento DOM se dispara.

Espero que ayude

Answer 2

Esencialmente, cuando llamas a .remove() , es un proxy para la función jQuery remove , que elimina el elemento del DOM, así como todos los eventos asociados del hash del evento que estaban vinculados al elemento.

El elemento Vista del Backbone aún contiene el .el , pero al volver a insertarlo en el DOM, el elemento jQuery ha perdido todos sus escuchas encuadernados.

Hay algunas soluciones:

1. Destruya por completo el elemento de vista, incluso desvinculando todos los eventos de modelo / controlador con el nuevo método de destroy (actualmente solo en github, se agregará en la próxima versión de Backbone) y cree una nueva vista al regresar (en lugar de simplemente almacenar en caché y re-rendering) - mi método preferido

2. Cree un método (o extienda eliminar) para usar el detatch de jQuery, que aparentemente hace lo mismo que eliminar sin perder los enlaces de eventos; no lo ha hecho, pero parece que funcionaría

3. Llame a .delegateEvents() en cada render: qué está haciendo ahora

Espero que esto ayude.