Obteniendo el modelo siguiente y anterior de una colección

Question

He visto algunas maneras diferentes de obtener el modelo siguiente o anterior de una colección, pero me preguntaba si alguien podría ofrecerme algún consejo sobre la forma en que decidí implementarlo. Mi colección está ordenada, pero la identificación que estoy ordenando no garantiza que sea secuencial. Solo se garantiza que es único. Supongamos que los ID más pequeños son entradas "más antiguas" para la colección y los ID más grandes son "más nuevos".

MyCollection = Backbone.Collection.extend({ 
    model: MyModel, 
    initialize:function(){ 
    this.getElement = this._getElement(0); 
    }, 
    comparator: function(model) { 
    return model.get("id"); 
    }, 
    _getElement: function (index){ 
    var self = this; 
    return function (what){ 
    if (what === "next"){ 
     if (index+1 >= self.length) return null; 
     return self.at(++index); 
    } 
    if (what === "prev"){ 
     if (index-1 < 0) return null; 
     return self.at(--index); 
    } 
    // what doesn't equal anything useful 
    return null; 
    }; 
    } 
}); 

Al utilizar getElement, hago cosas como getElement ("siguiente") y getElement ("Anterior") para pedir el modelo anterior o siguiente en mi colección. Lo que se devuelve de getElement es el modelo real, no el índice. Conozco collection.indexOf, pero quería una forma de recorrer una colección sin tener primero un modelo para empezar. ¿Es esta implementación más difícil de lo que necesita ser?

Answer 1

Haría algo como esto. Tenga en cuenta que no hay ningún error en el manejo actualmente, por lo tanto, si actualmente se encuentra en el primer modelo de la colección e intenta obtener el anterior, probablemente obtendrá un error.

MyCollection = Backbone.Collection.extend({ 
    model: MyModel, 
    initialize:function(){ 
    this.bindAll(this); 
    this.setElement(this.at(0)); 
    }, 
    comparator: function(model) { 
    return model.get("id"); 
    }, 
    getElement: function() { 
    return this.currentElement; 
    }, 
    setElement: function(model) { 
    this.currentElement = model; 
    }, 
    next: function(){ 
    this.setElement(this.at(this.indexOf(this.getElement()) + 1)); 
    return this; 
    }, 
    prev: function() { 
    this.setElement(this.at(this.indexOf(this.getElement()) - 1)); 
    return this; 
    } 
}); 

Para avanzar al siguiente modelo collection.next(). Para pasar al siguiente modelo y devolverlo var m = collection.next().getElement();

Para explicar un poco mejor cómo funciona next/prev.

// The current model 
this.getElement(); 
// Index of the current model in the collection 
this.indexOf(this.getElement()) 
// Get the model either one before or one after where the current model is in the collection 
this.at(this.indexOf(this.getElement()) + 1) 
// Set the new model as the current model 
this.setElement(this.at(this.indexOf(this.getElement()) + 1)); 

Answer 2

He hecho esto de forma ligeramente diferente porque estoy agregando los métodos al modelo en lugar de a la colección. De esa forma, puedo agarrar cualquier modelo y obtener el siguiente en la secuencia.

next: function() { 
    if (this.collection) { 
     return this.collection.at(this.collection.indexOf(this) + 1); 
    } 
}, 
prev: function() { 
    if (this.collection) { 
     return this.collection.at(this.collection.indexOf(this) - 1); 
    } 
}, 

Answer 3

Chocar este hilo de edad con una solución algo más genérico:

cosas que añadir a Collection.prototype

current: null, 

initialize: function(){ 
    this.setCurrent(0); 
    // whatever else you want to do here... 
}, 

setCurrent: function(index){ 
    // ensure the requested index exists 
    if (index > -1 && index < this.size()) 
     this.current = this.at(index); 
    else 
     // handle error... 
}, 

// unnecessary, but if you want sugar... 
prev: function() { 
    this.setCurrent(this.at(this.current) -1); 
}, 
next: function() { 
    this.setCurrent(this.at(this.current) +1); 
} 

a continuación, puede utilizar los métodos de azúcar para obtener el anterior/próximo modelo como tal ...

collection.prev(); 
collection.next(); 

Answer 4

Mi Backbo ne Clase SelectableCollection:

Backbone.Collection.extend({ 
    selectNext: function() { 
     if(this.cursor < this.length - 1) { 
      this.cursor++; 
      this.selected = this.at(this.cursor); 
      this.trigger('selected', this.selected); 
     } 
    }, 

    selectPrevious: function() { 
     if(this.cursor > 0) { 
      this.cursor--; 
      this.selected = this.at(this.cursor); 
      this.trigger('selected', this.selected); 
     } 
    }, 
    selectById: function (id) { 
     this.selected = this.get(id); 
     this.cursor = this.indexOf(this.selected); 
     this.trigger('selected', this.selected); 
    }, 
    unselect: function() { 
     this.cursor = null; 
     this.selected = null; 
     this.trigger('selected', null); 
    } 
});