如何在fetch(）之后正确地对主干js集合进行排序

How to properly sort a backbone js collection after fetch()

本文关键字：js 集合 排序 正确地 fetch 之后      更新时间：2023-09-26

我在想如何在页面加载时对主干集合进行排序时束手无策。这方面的文档似乎有点单薄，因为仅仅定义一个比较器肯定是不够的。我能找到的所有例子似乎都集中在比较器的定义上，这不应该是我的问题。

下面是一个说明我的问题的基本示例：

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

我认为您最好听集合上的"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);
    });
}
相关文章：