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
- Se establece el atributo del modelo
- El modelo dispara el
change
- Las capturas de recogida
change
- 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);