2012-09-05 19 views
16

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 debe conducir a una actualización de la tabla HTML, por lo que escribirbackbone.js collection events

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

Así que actualizar la tabla html, cuando toda la colección tiene nuevo, cuando un nuevo modelo se agrega y cuando una modelo se elimina.

También hay un componente de vista de detalle que se invoca cuando el usuario se desplaza y hace clic sobre una determinada fila de la tabla html. A principios de este componente consigo el modelo de la derecha de la colección

changeModel = this.collection.get(id); 

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

changeModel.set(attrs); 

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

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

por lo que añade "reemplazar" a la colección de unión

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

y antes de regresar a la vista de detalle que llama

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 perdido y en la que no tenga que desencadenar algo solo?

Respuesta

46

Los eventos change de los modelos se borran hasta la colección. (_onModelEvent -función de Colección en el annotated source. El método sólo se necesita básicamente todos los eventos a partir de modelos y les dispara en la colección.

Esto lleva a

  1. atributo Modelo se establece
  2. desencadena Modelo change
  3. Colección capturas change
  4. Colección disparadores change

Así

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

tiene que ser reemplazado con esta

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

Espero que esto ayude!

P.S.

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

ACTUALIZACIÓN

Y hoy en día se debe utilizar el -method on por la unión a los eventos.

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

Si está utilizando BB 1.0, y este evento se está escuchando en un View, sugiero pasar a utilizar el nuevo listenTo de obligar a los eventos, que también permite la fácil compromiso.Por al llamar view.remove(). En ese caso, debe hacer:

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

Gracias. Creo que deberías prefabricar la respuesta original diciendo algo así como: "Backbone ha agregado algunas conveniencias desde que escribí esto por primera vez, si estás utilizando un Backbone reciente, mira UPDATE a continuación". Más o menos 20 líneas de lo que parece ser la respuesta están cerca del límite de capacidad de atención para algunos de nosotros. Gracias de nuevo, útil. –

+0

La "actualización" acordada debería estar en la parte superior, pero esas 20 líneas de explicación y código estaban muy bien formateadas, no tuve problemas para leerlo. – Gal