2

ページにいくつかのタブがあり、タブがクリックされるたびに Backbone.js を使用してコンテンツ ( にSetView含まれる多くのもので構成される) が読み込まれます。SetListView

問題::ユーザーがタブから以前にロード/表示されたタブに切り替えると、コンテンツが再度ロードされ、以前にロードされたコンテンツに追加されSetListViewます。以前にロードしたコンテンツをクリアしてから再度ロードすることはできますが、同じコンテンツをロードし続けるのは最適ではないようです。

Backbone.js にタブの既存のコンテンツを保存させ、同じタブに戻るときに複数回ロードしないようにすることは可能ですか?

ビュー

// Views

var SetListView = Backbone.View.extend({
    el: '#set_list',

    initialize: function() {
        this.collection.bind('reset', this.render, this);
    },

    render: function() {
        this.collection.each(function(set, index) {
            $(this.el).append( new SetView({ model: set }).render().el );
        }, this);
        return this;
    }
});

var SetView = Backbone.View.extend({
    tagName: 'div',
    className: 'photo_box',

    template: _.template( $('#tpl_SetView').html() ),

    initialize: function() {
        this.model.on('destroy', this.close, this);
    },

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

    close: function() {
        this.unbind();
        this.remove();
    }
});

ルーター

// Router

var AppRouter = Backbone.Router.extend({

    routes: {
        '': 'sets',
        'sets': 'sets'
    },

    viewing_user_id: $('#viewing_user_id').val(),

    sets: function() {
        this.showTab('sets');

        this.setList = new SetCollection();
        this.setListView = new SetListView({ collection: this.setList });
        var self = this;
        this.setList.fetch({
            data: {user_id: self.viewing_user_id},
            processData: true
        });
    },

    showTab: function(tab) {
        // Show/hide tab contents
        $('.tab-content').children().not('#tab_pane_' + tab).hide();
        $('.tab-content').children('#tab_pane_' + tab).fadeIn('fast');

        // Activate/deactivate tabs
        $('#tab_' + tab).addClass('active');
        $('#tab_' + tab).siblings().removeClass('active');
    }
});
4

1 に答える 1

1

Backbone には、コンテンツを再取得する場合と取得済みのコンテンツを再利用する場合の違いを示す社内システムはありません。この各アクションをいつ実行するかを決定する必要があります。

これを実現するためのサンプル コードの変更は次のとおりです。

var AppRouter = Backbone.Router.extend({
    // ... more router code

    sets: function() {
        if( !this.setList ) this.initializeSets();
        this.showTab('sets');
    },

    initializeSets: function(){
        this.setList = new SetCollection();
        this.setListView = new SetListView({ collection: this.setList });
        var self = this;
        this.setList.fetch({
            data: {user_id: self.viewing_user_id},
            processData: true
        });
    },
});

したがって、initializeSets()まだ初期化されていない場合にのみ呼び出します。もちろん、sets初期化されているかどうかを尋ねるよりエレガントでクリーンな方法がありますが、これはあなた次第です。

于 2012-08-03T13:18:43.483 に答える