使用Backbone.js排序集合

Sorting collections using Backbone.js

本文关键字：集合 排序 js Backbone 使用      更新时间：2023-09-26

我正在尝试使用backbone.js添加一个动态排序到我的集合。

初始化时，集合具有默认排序并呈现视图。我做了一个按钮来测试如何改变排序。它调用以下函数:

app.productList.comparator = function(product) {
    return parseFloat(product.get("price"));
};
app.productList.sort();

如果我理解正确，集合现在应该排序，但视图仍然需要刷新。我在文档和本主题中阅读以侦听sort事件

window.ProductCollection = Backbone.Collection.extend({
    model:Product,
    localStorage: new Backbone.LocalStorage("ProductCollection"),
    events:{
        "sort":"test"
    },
    test:function(){
        alert('test');
    }
});

出于测试目的，我添加了一个简单的警报，但没有显示。所以排序事件似乎没有被触发。

你知道我哪里做错了吗?

Backbone.Collection不像Backbone.View那样考虑事件散列，您必须自己绑定事件。您可以使用initialize方法来执行此操作，例如

var ProductCollection = Backbone.Collection.extend({
    model:Product,
    initialize: function() {
        this.on('sort', this.test);
    },
    test: function(){
        console.log('test');
    }
});

和一个演示http://jsfiddle.net/nikoshr/fTwpf/

默认情况下，集合没有比较器。如果定义了比较器，它将用于按排序顺序维护集合。这意味着当添加模型时，它们被插入到collection.models中的正确索引处。比较器可以定义为sortBy(传递一个接受单个参数的函数)、sort(传递一个需要两个参数的比较器函数)，或者是一个表示要排序的属性的字符串。

"sortBy"比较器函数接受一个模型，并返回一个数字或字符串值，根据该值对模型进行相对排序。"sort"比较器函数接受两个模型，如果第一个模型排在第二个模型之前，则返回-1，如果它们的秩相同则返回0，如果第一个模型排在后面则返回1。

请注意，尽管本例中的所有章节都是向后添加的，但它们的顺序是正确的:

var Chapter  = Backbone.Model;
var chapters = new Backbone.Collection;
chapters.comparator = function(chapter) {
  return chapter.get("page");
};
chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));
alert(chapters.pluck('title'));
如果稍后更改模型属性，带有比较器的集合将不会自动重新排序，因此您可能希望在更改会影响顺序的模型属性后调用sort。

强制集合重新排序。通常情况下不需要调用这个函数，因为只要添加了模型，带有比较器的集合就会对自己进行排序。要在添加模型时禁用排序，请传递{sort: false}来添加。调用sort会触发集合上的"sort"事件。

相关文章：