初始化后对主干集合进行排序答案

【问题标题】：Sorting a Backbone Collection After initialization初始化后对主干集合进行排序
【发布时间】：2011-08-10 03:01:46
【问题描述】：

我正在使用 Backbone.js 呈现项目列表，例如书籍。呈现列表后，用户可以选择对它们进行排序。因此，如果用户单击按标题排序或按作者姓名排序，则列表将在客户端自行排序。

  window.Book = Backbone.Model.extend({
   defaults: {
     title: "This is the title",
     author: "Name here"
   },

在 Backbone 应用程序的上下文中完成这种排序的最佳方法是什么。我是否在 AppView 中使用 jQuery dom 排序器？

【问题讨论】：

标签： backbone.js

【解决方案1】：

您可能想查看关于这个主题的讨论：https://github.com/documentcloud/backbone/issues/41。

简而言之，当用户选择“按 X 排序”时，您可以：

在集合上设置comparator函数
调用集合的sort 函数（这将触发sort 事件）
在您的视图中侦听sort 事件，并（清除和）重绘项目

处理第 1 步和第 2 步的另一种方法是拥有自己的方法，该方法调用 Collection 的 sortBy 方法，然后触发您的 View 可以侦听的自定义事件。

但似乎清除和重绘是对视图进行排序并使其与集合的排序顺序保持同步的最简单（甚至可能是最快）的方法。

【讨论】：

谢谢 rulfzid。我将尝试这种方法
对 2 的更正。sort 事件是调用集合的排序函数时触发的事件，而不是 reset
在您看来，您需要听“排序”事件而不是“重置”（我认为这是旧版本的骨干网）。将相同的集合传递给视图并使用：this.listenTo(this.collection, 'sort', this.render);
这会产生大量的僵尸视图吗？似乎每次您“排序”时，您都在创建新的 Backbone 视图对象，这会花费额外的时间和空间，并且会留下旧的视图对象。

【解决方案2】：

您可以更新比较器函数，然后调用排序方法。

// update comparator function
collection.comparator = function(model) {
    return model.get('name');
}

// call the sort method
collection.sort();

视图将自动重新渲染。

【讨论】：

那么如何降序呢？
.. 找到了... 使用减号 'return -model.get('name');'
@Kirby，我认为带有- 符号的降序仅适用于Number 属性，不适用于String 属性？

【解决方案3】：

comparator 是你所需要的

var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    comparator: function(item) {
        return item.get('pid');
    }
});

【讨论】：

在初始化期间不是比较器用于对集合进行排序。列表显示后，用户可以通过不同的方式对它们进行重新排序，这就是我需要弄清楚的。

【解决方案4】：

这种方式效果很好，可以动态地按所有attributes排序并处理ascending或descending：

var PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    sortByField: function(field, direction){
            sorted = _.sortBy(this.models, function(model){
                return model.get(field);
            });

            if(direction === 'descending'){
                sorted = sorted.reverse()
            }

            this.models = sorted;
    }
});

【讨论】：

在排序函数中乘以-1，避免排序两次。
@Leo 仅在字段为数字时才有用
排序后，我有空值出现在顶部。如何将这些空值移到底部？
@Jyothu 我建议要么从你的集合中删除空项目，要么通过某个索引对表示空值的字段进行排序，然后排序到底部。