0

私の質問は、バックボーンを使用してレコードのリストを表示する適切な方法についてです。ユーザーに表示したい人物モデルがあり、名前、姓、ID で並べ替えられるようにするとします。

最初の本能は、ビューにイベントをキャッチさせ、ユーザーの並べ替えオプションに基づいて再レンダリングさせることです。この方法の問題点は、データ駆動型ではなく UI 駆動型であることです。

コレクションには属性が含まれていないため、モデルに並べ替え属性を設定することを 2 番目に考えます (ただし、これが最適なオプションと思われます)。このメソッドは、少なくとも並べ替え属性を設定することによって駆動されるデータですが、恐ろしく冗長であり、保存時に並べ替え属性が削除されていない場合、それらはサーバーに送信されます | 地元か…

最後の考えはおそらく正しいものです。並べ替え/表示プロパティを含む、使用される制御モデルとなる 2 番目のモデルを作成します。この方法に関する私の問題は、イベントとモデルが非常に手に負えなくなる可能性があることです。単なる人物モデルを超えて拡張し、これをかなり大きなアプリにすると、多くのモデルとイベントが発生し、管理が難しくなります。モデル 1 のビューは最初のイベントをキャッチする必要があり、次にコレクションがカスタム イベントをトリガーし、2 番目のモデルがカスタム イベントをキャッチしてレンダリングする必要があります。

長い投稿で申し訳ありません。私はバックボーン js にかなり慣れていないため、ベスト プラクティスを確実に把握したいと考えています。助けてくれてありがとう。少なくとも正しい軌道に乗っていることを願っています。

4

1 に答える 1

1

私は昨夜これを実装しました。

新しいコレクションを設定してから、コレクションでメソッドをcomparator使用できます。リストを再レンダリングするためにビューで使用できるイベントを発生させます。sortsortreset

これが私のビューです。これには、ユーザーがデータの並べ替え方法を選択できる選択ボックスが含まれています。

App.HouseListView = Backbone.View.extend({
    el: '.house-list',
    initialize: function() {
        App.houseCollection.bind('reset', this.populateList, this);

    },
    events: {
        'change .sort':'sort',
    },
    populateList: function(collection) {
        this.$('ul').html('');
        _.each(collection.models, function(model) {
            var view = new App.HouseListElemView({model:model});
            this.$('ul').append(view.el);
        });
    }, 
    sort: function(e) {
        var sort_by = $(e.srcElement.selectedOptions[0]).attr('data-sort-by');
        App.houseCollection.comparator = function(house) {
            return house.get(sort_by);
        }
        App.houseCollection.sort();
    },
});

お役に立てれば

編集:実装@mu is too shortの提案:

App.Houses = Backbone.Collection.extend({
    model: App.House,
    url: API_URL,
    _sort_by: 'price',
    sort_houses_by: function(sort_by) {
        this._sort_by = sort_by;
        this.sort();
    },
    comparator: function(house) {
        return house.get(this._sort_by);
    },
});


App.houseCollection = new App.Houses();

App.HouseListView = Backbone.View.extend({
    el: '.house-list',
    initialize: function() {
        App.houseCollection.bind('reset', this.populateList, this);

    },
    events: {
        'change .sort':'sort',
    },
    populateList: function(collection) {
        this.$('ul').html('');
        _.each(collection.models, function(model) {
            var view = new App.HouseListElemView({model:model});
            this.$('ul').append(view.el);
        });
    }, 
    sort: function(e) {
        var sort_by = $(e.srcElement.selectedOptions[0]).data('sort-by');
        App.houseCollection.sort_houses_by(sort_by);
    },
});
于 2012-06-17T16:02:07.147 に答える