从加载多次（Backbone.js的）prevent标签内容 [英] Prevent tab contents from loading multiple times (backbone.js)

问题描述

我有我的网页，其内容（包括许多的setView 按 SetListView 包含的）上的几个选项卡Backbone.js的使用无论何时被点击其标签加载。

问题：当从一个选项卡pviously加载/ A $ P $用户交换机热门图片标签，内容再次加载，并追加到<$ C $的previously加载的内容C> SetListView 。我可以让它重新加载它之前清除previously加载内容，但它似乎是不太理想，以保持加载相同的内容。

时有可能使Backbone.js的商店现有内容的标签，切换回同一选项卡时，没有多次加载它？

查看

  //浏览VAR SetListView = Backbone.View.extend（{
    EL：#set_list'，    初始化：功能（）{
        this.collection.bind（复位，this.render，这一点）;
    }，    渲染：功能（）{
        this.collection.each（功能（设置，指数）{
            $（this.el）.append（新的setView（{模式：集}）渲染（）EL）;
        }， 这个）;
        返回此;
    }
}）;VAR的setView = Backbone.View.extend（{
    标签名：'格'，
    产品类别：'photo_box'，    模板：_.template（$（'＃tpl_SetView'）HTML（）。）    初始化：功能（）{
        this.model.on（'破坏'，this.close，这一点）;
    }，    渲染：功能（）{
        $（this.el）的.html（this.template（this.model.toJSON（）））;
        返回此;
    }，    关闭：函数（）{
        this.unbind（）;
        this.remove（）;
    }
}）;
 

路由器

  //路由器VAR AppRouter = Backbone.Router.extend（{    路线：{
        ''：'套'，
        '套'：'套'
    }，    viewing_user_id：$（'＃viewing_user_id）VAL（）    集合：函数（）{
        this.showTab（'套'）;        this.setList =新SetCollection（）;
        this.setListView =新SetListView（{集合：this.setList}）;
        VAR自我=这一点;
        this.setList.fetch（{
            数据：{USER_ID：self.viewing_user_id}，
            过程数据：真
        }）;
    }，    showTab：功能（标签）{
        //显示/隐藏选项卡的内容
        $（'标签内容'）儿童（）不是（'＃tab_pane_'+标签）.hide（）;
        $（'标签内容'）儿童（'＃tab_pane_'+标签）.fadeIn（快）。        //激活/关闭的选项卡
        $（'＃tab_'+标签）.addClass（激活）;
        $（'＃tab_'+标签）.siblings（）removeClass移除（激活）。
    }
}）;
 

解决方案

骨干也没有任何的内部的系统差异，当你想要的再取出的之间内容或重复使用的已经进账。你必须在每个做这个动作来决定。

您例如code的修改来实现这个可以是：

  VAR AppRouter = Backbone.Router.extend（{
    // ...更多路由器code    集合：函数（）{
        如果this.initializeSet​​s（）（this.setList！）;
        this.showTab（'套'）;
    }，    initializeSet​​s：功能（）{
        this.setList =新SetCollection（）;
        this.setListView =新SetListView（{集合：this.setList}）;
        VAR自我=这一点;
        this.setList.fetch（{
            数据：{USER_ID：self.viewing_user_id}，
            过程数据：真
        }）;
    }，
}）;
 

所以，你只能叫 initializeSet​​s（），如果它们尚未初始化。当然会更加优雅整洁的方式来向用户询问的 集已被初始化的，但这是你的。

I have a few tabs on my page, whose contents (consisting of many SetView contained by SetListView) are loaded using Backbone.js whenever its tabs is being clicked on.

Problem:: When the user switches from a tab to a previously loaded/viewed tabbed, the contents load again and append to the previously loaded content in SetListView. I can get it to clear the previously loaded contents before loading it again, but it seems to be less than optimal to keep loading the same content.

Is it possible to make Backbone.js store existing content for a tab and not load it multiple times when switching back to the same tab?

Views

// 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

// 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');
    }
});

解决方案

Backbone has not any in-house system to difference between when you want to re-fetch the content or re-using the already fetched one. You have to decide when do each of this actions.

A modification of your example code to achieve this can be:

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
        });
    },
});

So you only call initializeSets() if they are not already initialized. Of course will be more elegant and clean ways to ask if the sets have been initialized but this is up to you.

这篇关于从加载多次（Backbone.js的）prevent标签内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！