寻找更有效的方法来设置和更改顺序的骨干模型属性

Question

Using Backbone.js, I've created a Products collection made up of Product models. Each Product model contains an orderIndex attribute. The collection is using this orderIndex attribute as its comparator.

During my app's operation, I need to change the orderIndex value for one of the products in the collection. When I do this, I also need to adjust the orderIndex for the other models in the collection so that they still remain in sequential order. As an example, if I start with four models:

A -> orderIndex = 0
B -> orderIndex = 1
C -> orderIndex = 2
D -> orderIndex = 3

And then I change the orderIndex of B to 2, I would then also want C to change to 1, so that B and C switch places when sort() is called on the collection:

A -> orderIndex = 0
B -> orderIndex = 2
C -> orderIndex = 1
D -> orderIndex = 3

Another example using the original setup would be if I changed orderIndex of A to 3, then I would also need B to change to 0, C to change to 1, and D to change to 2, resulting in:

A -> orderIndex = 3
B -> orderIndex = 0
C -> orderIndex = 1
D -> orderIndex = 2

I've written a function to handle this, but I feel like I'm overlooking a more efficient way to do this using more built in underscore or js functions. Here's the function I'm using now:

adjustModelOrderIndex: function(model, newIndex){
    var currentOrderIndex = model.get("orderIndex");
    var newOrderIndex = newIndex;

    model.set({orderIndex: newOrderIndex});

    _.each(_.without(this.models, model), function(model){
        if(currentOrderIndex > newOrderIndex){
            if(model.get("orderIndex") >= newOrderIndex && model.get("orderIndex") <= currentOrderIndex){
                model.set({orderIndex: model.get("orderIndex") + 1});
            }
        }
        else{
            if(model.get("orderIndex") <= newOrderIndex && model.get("orderIndex") >= currentOrderIndex){
                model.set({orderIndex: model.get("orderIndex") - 1});
            }
        }
    }, this);

}

This function lives in my collection, and the arguments represent the model that is being changed, as well as the value that its orderIndex attribute is going to be changed to.

Can someone recommend a better way to accomplish this?

Answer 1

I usually find plain old Array.prototype.splice on the raw array of models to be of great help in this kind of situation. You can then use the natural order of the array to update your orderIndex attributes :

var OrderedCollection = Backbone.Collection.extend({
    comparator: 'orderIndex',

    adjustModelOrderIndex: function(model, newIndex) {
        var currentOrderIndex = model.get("orderIndex");            
        if (newIndex === currentOrderIndex) return;

        // remove the model from the array
        this.models.splice(currentOrderIndex, 1);

        // reinject it at its new position
        this.models.splice(newIndex, 0, model);

        // update orderIndex
        this.each(function(model, ix) {
            model.set('orderIndex', ix);
        });

        // order changed, let's trigger a sort event
        // or use this.sort() if you prefer
        this.trigger('sort', this);
    }
});

Sample usage:

var c = new OrderedCollection([
    {id: 'D', orderIndex: 3},
    {id: 'C', orderIndex: 2},
    {id: 'B', orderIndex: 1},
    {id: 'A', orderIndex: 0}
]);
// ["A", "B", "C", "D"]
c.on('sort', function() {
    console.log(c.pluck('id'));
});

c.adjustModelOrderIndex(c.get('B'), 0); //  ["B", "A", "C", "D"]
c.adjustModelOrderIndex(c.get('B'), 1); //  ["A", "B", "C", "D"]
c.adjustModelOrderIndex(c.get('B'), 2); //  ["A", "C", "B", "D"]
c.adjustModelOrderIndex(c.get('A'), 3); //  ["C", "B", "D", "A"]

And a demo to play with http://jsfiddle.net/F6XSC/1/