Question

我的页面上有几个标签，只要点击标签，就会使用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');
    }
});

Answer 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是否已经初始化但这取决于你。

防止标签内容多次加载（backbone.js）

1 个答案: