Question

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

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

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

如果我理解正确，现在应该对Collection进行排序，但仍需要刷新视图。我在文档和in this topic中阅读了sort事件

window.ProductCollection = Backbone.Collection.extend({
    model:Product,
    localStorage: new Backbone.LocalStorage("ProductCollection"),

    events:{
        "sort":"test"
    },

    test:function(){
        alert('test');
    }
});

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

我在这里做错了什么想法？

Answer 1

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/

Answer 2

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

“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”事件。

使用Backbone.js对集合进行排序

2 个答案: