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 回答