3

我正在尝试使用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');
    }
});

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

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

4

2 回答 2

4

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/

于 2013-06-05T08:21:48.953 回答
1

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

“sortBy”比较器函数接受一个模型并返回一个数字或字符串值，模型应该相对于其他模型进行排序。“排序”比较器函数采用两个模型，如果第一个模型应该在第二个之前，则返回 -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 会触发集合上的“排序”事件。

于 2013-06-05T08:29:39.233 回答