javascript - 寻找更有效的方法来设置和更改顺序 Backbone 模型属性

Question

使用 Backbone.js，我创建了一个由 Product 模型组成的 Products 集合。每个 Product 模型都包含一个 orderIndex 属性。该集合使用此 orderIndex 属性作为其比较器。

在我的应用运行期间，我需要更改集合中其中一款产品的 orderIndex 值。当我这样做时，我还需要调整集合中其他模型的 orderIndex ，以便它们仍然保持顺序。举个例子，如果我从四个模型开始:

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

然后我将 B 的 orderIndex 更改为 2，然后我还希望 C 更改为 1，以便 B 和 C 在 sort() 时交换位置在集合上调用:

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

使用原始设置的另一个示例是，如果我将 A 的 orderIndex 更改为 3，那么我还需要将 B 更改为 0、C 更改为 1、D 更改为 2，结果是:

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

我已经编写了一个函数来处理这个问题，但我觉得我忽略了一种使用更多内置下划线或 js 函数来执行此操作的更有效方法。这是我现在使用的功能:

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);

}

此函数位于我的集合中，参数表示正在更改的模型，以及其 orderIndex 属性将更改为的值。

有人可以推荐一种更好的方法来实现这一目标吗？

Answer 1

我通常会发现普通的旧Array.prototype.splice上raw array of models在这种情况下有很大的帮助。然后，您可以使用数组的自然顺序来更新您的 orderIndex 属性:

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);
    }
});

使用示例:

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"]

还有一个演示 http://jsfiddle.net/F6XSC/1/