1

私は、ページの読み込み時にバックボーン コレクションをソートする方法を理解しようとしています。コンパレータを定義するだけでは十分ではないため、この分野のドキュメントは少し薄いようです。私が見つけることができるすべての例は、コンパレーターの定義に焦点を当てているようですが、これは私の問題ではありません。

これが私の問題を示す基本的な例です：

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

});
4

1 に答える 1

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);
    });
}
于 2013-07-09T01:02:44.257 に答える