javascript - 从 View 中重新排序 Backbone 集合

Question

我在根据点击事件求助于我的收藏时遇到问题。为每个模型触发并执行排序功能，但既不会触发重置事件，也不会在 View 上更改集合。

我在我的收藏中定义了多个排序标准，例如:

feNoRequire.Collections.CompetitionCollection = Backbone.Collection.extend({

    model: feNoRequire.Models.CompetitionModel,
    comparator: function (property) {
        return selectedStrategy.apply(model.get(property));
    },
    strategies: {
        name: function (competition) { return competition.get("name"); }, 
        nameReverse: function (competition) { console.log(competition); return -competition.get("name"); }, 
        date: function (competition) { console.log(competition.get("event")); },
    },
    changeSort: function (sortProperty) {
        this.comparator = this.strategies[sortProperty];
    },
    initialize: function () {
        this.changeSort("name");   
    }

});

在我的 View 文件中:

initialize: function(options){
        this.evnt = options.evnt;

        this.collection.on('reset', this.render, this);     
        this.evnt.bind("orderByDate", this.changeSort, this);
    },

    changeSort: function(){
        this.collection.changeSort('nameReverse')
        this.collection.sort();
    },

    render: function() {
        console.log("going for rendering")
        var renderedContent = this.template({competitions: this.collection.toJSON()});

        $(this.el).html(renderedContent);
        return this;
    }

关于如何解决这个问题有什么想法吗？

编辑在下面的答案之后，渲染现在被触发，但对象只在初始化时被排序。任何后续排序都会以初始顺序返回集合 - this.changeSort("name");

我的模型:

feNoRequire.Models.CompetitionModel = Backbone.Model.extend({
    initialize: function(){
        this.attributes.events = new feNoRequire.Collections.EventCollection(this.attributes.events);
    }
});

Answer 1

来自fine manual :

sort collection.sort([options])

[...] Calling sort triggers a "sort" event on the collection.

所以调用 sort 不会触发 "reset" 事件(因为集合没有得到 reset )，它会触发 "sort " 事件。所以你想:

this.collection.on('sort', this.render, this);

以及绑定(bind)到 “reset”。

演示:http://jsfiddle.net/ambiguous/34Ena/

---

我看到您正在调用 changeSort('nameReverse') 并且排序是这样做的:

nameReverse: function (competition) {
    return -competition.get("name");
}

这不会像您认为的那样，对非数字字符串求反会给您 NaN。这意味着您最终将尝试对 NaN 列表进行排序，而所有这些都是 false:

NaN  < NaN
NaN  > NaN
NaN == NaN

所以对 NaN 的列表进行排序没有任何用处。如果要对字符串进行反向排序，则必须使用两个参数比较器函数:

nameReverse: function(a, b) {
    a = a.get('name');
    b = b.get('name');
    return a < b ?  1
         : a > b ? -1
         :          0;
}