Question

我最终想要弄清楚如何在页面加载时对主干集合进行排序。这方面的文档似乎有点薄，因为定义比较器肯定是不够的。我能找到的所有例子似乎都集中在比较器的定义上，这不应该是我的问题。

以下是说明我的问题的基本示例：

$(function() {

var Item = Backbone.Model.extend({
    defaults: {
        amount: 0
    },

    sync: function(method, collection, options) {
        options.url = this.methodToURL(method.toLowerCase());
        Backbone.sync(method, collection, options);
    },

    methodToURL: function(method) {
        switch(method) {
            case 'create':
                return "item";
                break;
            case 'read':
                return "item/" + this.get('id');
                break;
            case 'update':
                return "item";
                break;
            case 'delete':
                return "item/" + this.get('id');
                break;
            default:
                return "";
        }
    }

});

var ItemList = Backbone.Collection.extend({
    model: Item,

    url: 'items',

    comparator: function(item) {
        return item.get("amount");
    }
});

var items = new ItemList;

var ItemView = Backbone.View.extend({
    tagName: 'tr',
    template: _.template($("#item-template").html()),

            render: function() {
                   this.$el.html(this.template(this.model.toJSON()));
                   return this;
            }
    });

var AppView = Backbone.View.extend({
    el: $("#item-view"),

    initialize: function() {
        this.amount = $("#item-amount");
        this.listenTo(items, 'add', this.addItem);
        items.fetch();
    },

    addItem: function(item) {
        var view = new ItemView({model: item});
        $("#item-list").append(view.render().el);
    }

});

var app = new AppView();

});

Answer 1

我认为你最好听一下集合上的"sync"事件，而不是"add"事件。

“add"事件可能会被调用，因为单个项目已添加到集合中，并且它们可能不会按照最终排序的顺序添加。

因此，请尝试将listenTo行更改为：

this.listenTo(items, 'sync', this.addItems);

然后你的addItems函数可以重写为：

addItems: function(items) {
    $("#item-list").empty();
    items.each(function(item) {
        var view = new ItemView({model: item});
        $("#item-list").append(view.render().el);
    });
}

如何在fetch（）之后正确排序骨干js集合

1 个答案: