backbone.js

backbone.js colección eventos



(1)

Desarrollo una aplicación web jquery & backbone.js.
Un componente tiene una tabla html y detrás de esta tabla hay una colección backbone.js.
Cualquier cambio en esta colección debería llevar a una actualización de la tabla html, así que escribo

this.collection.bind("reset add remove", this.renderRows, this);

Así que actualizo la tabla html, cuando toda la colección se vuelve nueva, cuando se agrega un nuevo modelo y cuando se elimina un modelo.

También hay un componente de vista de detalle al que se llama cuando el usuario se desplaza y hace clic sobre una determinada fila de la tabla html. Al comienzo de este componente, obtengo el modelo correcto de la colección.

changeModel = this.collection.get(id);

Después de que el usuario ha cambiado algunos atributos, lo hago

changeModel.set(attrs);

y volver a la tabla html. El modelo en la colección tiene los valores correctos cambiados.

Pero la tabla html no se actualiza porque no se activó ninguno de los 3 eventos (restablecer, agregar, eliminar).

Así que agregué "reemplazar" a la colección de enlace

this.collection.bind("replace reset add remove", this.renderRows, this);

y antes de volver de la vista detallada llamé

this.collection.trigger("replace");

Mi solución funciona, pero mi pregunta es:

¿Hay alguna solución backbone.js "nativa" que ya esté allí y que haya omitido y en la que no tenga que activar algo por mi cuenta?


Los eventos de change de los modelos suben a la colección. (La _onModelEvent _onModelEvent de la colección en la fuente anotada . El método básicamente toma todos los eventos de los modelos y los activa en la colección.

Esto lleva a

  1. Se establece el atributo del modelo
  2. El modelo dispara el change
  3. Las capturas de recogida change
  4. La colección desencadena el change

Asi que

this.collection.bind("replace reset add remove", this.renderRows, this);

tiene que ser reemplazado con este

this.collection.bind("change reset add remove", this.renderRows, this);

¡Espero que esto ayude!

PD

Mi opinión personal es que no se debe volver a dibujar toda la tabla si solo se cambia un modelo. En su lugar, haga de cada fila de la tabla una vista en sí misma que tenga el modelo correspondiente como su modelo y luego reaccione a los cambios de atributos allí. No tiene sentido volver a dibujar 500 celdas de la tabla si está apuntando solo a una.

ACTUALIZAR

Y hoy en día, debe utilizar el método on para vincular eventos.

collection.on("change reset add remove", this.renderRows, this);

Si está utilizando BB 1.0, y este evento se está escuchando dentro de una View , sugiero que se mueva para usar el nuevo listenTo para enlazar eventos, lo que también permite unir fácilmente al llamar a view.remove() . En ese caso deberías hacer:

// assuming this is the view this.listenTo(collection, "change reset add remove", this.renderRows);