1

selectカテゴリのリストとその下にあるファイルのテーブルがあるバックボーンアプリについて考えてみます。属するカテゴリに関係なく、すべてのファイルがApp.collection.filesコレクションに含まれます。ユーザーが新しいカテゴリを選択したときに、それらの一致するファイルのみを表示するようにテーブルをフィルタリングしたいと思います。

これは完全にクライアント側で行いたいと思います。新しいカテゴリが選択されるたびに、サーバーからファイルの新しいリストを取得したくありません。

フィルタリング自体を達成するために、私はApp.collection.files.where({category_id: xx})内に行くつもりです。App.View.Files.render()

これを機能させるためにイベントをトリガー/応答するための最良のBackbone-yの方法は何ですか？

私が遊んでいるアイデアの1つは、フィルター処理されたファイルを含む別のコレクションですが、これが最善のアプローチかどうかはわかりません。

App.View.FilesPage = Backbone.View.extend({
    template: App.utils.template('files-page'),
    className: 'container-fluid',
    initialize: function(){
        this.render();
    },
    render: function(){
        this.$el.html(this.template());

        this.$el.find('.categories').append(
            new App.View.Categories({collection:App.collection.categories}).el
        );

        this.$el.find('.files table').append(
            new App.View.Files({collection:App.collection.files}).el
        );

        return this;
    }
});

App.View.Categories = Backbone.View.extend({
    tagName: 'select',
    events: {
        'change': 'onChange'
    },
    initialize: function(){
        this.$el.attr('size', this.collection.length + 1);

        this.render();
    },
    render: function(){
        var option = function(value, text, isSelected){
            return $('<option></option>', {'value':value, 'text':text});
        };

        this.$el.html(option(0, 'All Documents'));

        this.$el.append(
            this.collection.invoke(function(){
                return option(this.get('category_id'), this.get('title'));
            })
        ).val(0);

        return this;
    },
    onChange: function(event){

    }
});

App.View.Files = Backbone.View.extend({
    tagName: 'tbody',
    initialize: function(){
        this.render();
    },
    render: function(){         
        this.$el.html(
            this.collection.invoke(function(){
                return new App.View.File({model:this}).el;
            })
        );

        return this;
    }
});
4

1 に答える 1

0

これが私が思いついた解決策の1つで、表面的には問題なくダンディに見えます。

コードの変更はコメント内で呼び出されます。

このソリューションについての考え、および完全に異なるソリューションを歓迎します。

App.View.FilesPage = Backbone.View.extend({
    template: App.utils.template('files-page'),
    className: 'container-fluid',
    initialize: function(){
        // CHANGE: Store application wide reference to 'Categories' model
        App.model.categories = new App.Model.Categories();

        this.render();
    },
    render: function(){
        this.$el.html(this.template());

        this.$el.find('.categories').append(
            new App.View.Categories({
                // CHANGE: Pass model into 'Categories' view
                model: App.model.categories,
                collection: App.collection.categories
            }).el
        );

        this.$el.find('.files table').append(
            new App.View.Files({collection:App.collection.files}).el
        );

        return this;
    }
});

App.View.Categories = Backbone.View.extend({
    tagName: 'select',
    events: {
        'change': 'onChange'
    },
    initialize: function(){         
        this.$el.attr('size', this.collection.length + 1);

        this.render();
    },
    render: function(){
        var option = function(value, text, isSelected){
            return $('<option></option>', {'value':value, 'text':text});
        };

        this.$el.html(option(0, 'All Documents'));

        this.$el.append(
            this.collection.invoke(function(){
                return option(this.get('category_id'), this.get('title'));
            })
        ).val(0);

        return this;
    },
    onChange: function(){
        // CHANGE: Update attribute within 'Categories' model
        this.model.set('category_id', this.$el.val());
    }
});

App.View.Files = Backbone.View.extend({
    tagName: 'tbody',
    initialize: function(){     
        this.collection.on('reset', this.render, this);
        // CHANGE: Listen for change on 'Categories' model, and re-render this view
        App.model.categories.on('change:category_id', this.render, this);

        this.render();
    },
    render: function(){
        this.$el.html(
            _.invoke(this.getFilteredFiles(), function(){
                return new App.View.File({model:this}).el;
            })
        );

        return this;
    },
    // CHANGE: Return a filtered set of models from collection, based on 'Categories' model attributes
    getFilteredFiles: function(){
        var categoryId = App.model.categories.get('category_id');

        if (categoryId!=0){
            return this.collection.where({'category_id': categoryId});
        }
        else{
            return this.collection.models;
        }
    }
});
于 2013-01-16T20:13:33.013 に答える