javascript - 如何在 fetch() 之后正确对主干 js 集合进行排序

Question

我束手无策，试图弄清楚如何在页面加载时对 Backbone 集合进行排序。该领域的文档似乎有点薄弱，因为定义比较器绝对是不够的。我能找到的所有示例似乎都集中在比较器的定义上，这不应该是我的问题。

这是说明我的问题的基本示例:

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