初始化后对Backbone集合进行排序

Question

我正在使用Backbone.js来渲染一个项目列表，例如图书。在列表呈现后，用户有选项可以对其进行排序。因此，如果用户单击按标题排序或按作者名称排序，列表将在客户端自动排序。

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

在 Backbone 应用程序的上下文中，实现排序的最佳方法是什么？我应该在 AppView 中使用 jQuery DOM 排序器吗？

- Jhony Fung

Answer 1

你可以更新比较函数，然后调用 sort 方法。

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

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

视图将被自动重新渲染。

- jpanganiban

---

然后如何进行降序排列？ - Kirby

找到了...使用减号 'return -model.get('name');' - Kirby

@Kirby，我认为带有“-”符号的降序仅适用于Number属性，而不适用于String属性？ - pioto

Answer 2

有一个关于这个话题的讨论，你可能想看看：https://github.com/documentcloud/backbone/issues/41。

简单来说，当用户选择“按X排序”时，您可以：

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

处理步骤1和2的另一种方法是拥有自己的方法，该方法调用集合的 sortBy 方法，然后触发 View 可以监听到的自定义事件。

但似乎清除并重新绘制是最简单（甚至可能是最快）的方式来对您的 View 进行排序，并使其与您的 Collection 的排序顺序保持同步。

- satchmorun

---

谢谢rulfzid。我将尝试这种方法。 - Jhony Fung

更正第二条：当调用集合的排序函数时，触发的事件是“sort”事件，而不是“reset”事件。 - CheapSteaks

在您的视图中，您需要侦听“sort”事件而不是“reset”（我认为这是旧版本的backbone）。将相同的集合传递给视图并使用：this.listenTo(this.collection，'sort'，this.render)。 - Fasani

这会创建大量的僵尸视图吗？每次“排序”似乎都会创建新的Backbone视图对象，这需要额外的时间和空间，并留下旧的视图对象。 - benjaminz

Answer 3

comparator 就是你需要的。

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

- Nick Vanderbilt

---

比较器不是用于在初始化期间对集合进行排序吗？列表显示后，用户可以采取不同的方式重新排序，这就是我需要解决的问题。 - Jhony Fung

Answer 4

这种方法很好，可以动态地按所有 属性 进行排序，并处理 升序 或 降序：

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

- Loourr

---

在排序函数中乘以“-1”，以避免重复排序。 - Leo Romanovsky

@Leo 只有在字段为数字时才有用。 - Roberto

排序后，我发现空值出现在了顶部。我该如何将这些空值移动到底部？ - Jyothu

@Jyothu 我建议你要么从你的集合中删除空项，要么按照一个表示空值的字段进行排序，该字段会被排序到底部。 - Loourr