backbone.js: Actualice el modelo, reordene y vuelva a procesar la colección de modelos

Question

En mi aplicación tengo una conexión socket.io que está escuchando el servidor y obteniendo actualizaciones de los modelos mantenidos por el navegador del cliente (que recupera el modelo por id y llama al set en el atributo de modelo).

Me gustaría que la colección se ordene, y luego vuelva a hacer en conjunto para reflejar cualquier nuevo pedido en los modelos como resultado del set (la mayoría de los ejemplos parecen estar alrededor de vistas individuales que se vuelven a hacer) ¿Cuál es un método para lograr esto?

NB Tengo un diseño de backbone.js levantado bastante al pie de la aplicación todo de ejemplo (esta es la primera aplicación de la red troncal).

Answer 1

Puede lograr lo que desea proporcionando un método comparator para su colección.

Ejemplo:

ModelCollection = Backbone.Collection.extend({ 
    comparator: function(a, b) { 
     if (a.get("name") > b.get("name")) return 1; 
     if (a.get("name") < b.get("name")) return -1; 
     if (a.get("name") === b.get("name")) return 0; 
    }, 

    initialize: function() { 
     this.on('change:name', function() { this.sort() }, this); 
    } 
}); 

El comparator en este ejemplo hará que su colección que se ordena en orden ascendente por el atributo name de los modelos en su interior.

Tenga en cuenta que su colección no se ordenará automáticamente al cambiar atributo (s) de cualquiera de sus models. De manera predeterminada, la clasificación ocurre solo al crear nuevos modelos y agregarlos a la colección; pero el comparatorserá se utilizará por el método collection.sort.

El código anterior aprovecha esto mediante la configuración de un detector de eventos que simplemente vuelve a ordenar la colección en cualquier change s a los atributos name de su models.

Para completar el cuadro, hemos creado un detector de eventos apropiado en el View relación con la extracción para asegurarse de que vuelve a renderizar sobre cualquier cambio:

CollectionView = Backbone.View.extend({ 
    initialize: function() { 
     this.collection = new ModelCollection(); 
     this.collection.on('all', function() { this.render() }, this); 
    }, 

    render: function() { 
     this.$el.html(this.collection.toJSON()); 
    } 
}); 

eso es todo :)

---

extracto relevante de la Backbone documentation:

Por defecto no hay comparator para una colección. Si define un comparator, se usará para mantener la colección en orden ordenado. Esto significa que a medida que se agregan modelos, se insertan en el índice correcto en collection.models. Un comparador puede definirse como sortBy (pasar una función que toma un solo argumento), como sort (pasar una función de comparación que espera dos argumentos), o como una cadena que indica el atributo para ordenar por. [...] Las colecciones con comparator no se reordenarán automáticamente si posteriormente cambia los atributos del modelo, por lo que puede llamar al sort después de cambiar los atributos del modelo que afectarían el pedido.