BackboneJS - 缓存视图实例

发布于 2024-11-05 05:40:01 字数 752 浏览 2 评论 0原文

我正在编写一个 BackboneJS 应用程序，其中六个选项卡中的每一个都由它们自己的视图表示。我是否应该保存视图的实例，并在用户点击他已经访问过的选项卡时调用它的 render() 函数？或者创建一个新实例并访问 jQuery 在第一次渲染期间为我缓存的模板？

如果我选择后者，我仍然需要确保不会通过我的 JSON API 获取另一个集合，因为这是在某些视图初始化期间完成的。

现在我将所有视图实例存储在我的控制器中，但我想知道这是内置的还是有更好的替代方案。

干杯。

更新：这是我在控制器中使用的 loadCachedView 函数：

loadCachedView: function (name, view, collection){
    if (!this.views[name]){
        if (collection){
            this.collections[name] = new collection();
        }
        this.views[name] = new view({collection: this.collections[name]});
    } else {
        this.views[name].render();
    }
},

因此，在渲染视图时，我只需执行：this.loadCachedView('settings', SettingsView, SettingsCollcetion)。

原文

I'm writing a BackboneJS app where each of six tabs are represented by their own views. Am I supposed to save the instance of the view and just call it's render() function whenever a user hits a tab he's already been to? Or create a new instance and access the template that jQuery cached for me during the first rendering?

If I do the latter, I would still need to make sure another collection isn't fetched through my JSON API, since that's done during initialization of some views.

Right now I store all view instances in my controller but I was wondering if this was built-in somehow or there are better alternatives.

Cheers.

Update: Here's my loadCachedView function that I use in my controller:

loadCachedView: function (name, view, collection){
    if (!this.views[name]){
        if (collection){
            this.collections[name] = new collection();
        }
        this.views[name] = new view({collection: this.collections[name]});
    } else {
        this.views[name].render();
    }
},

So when rendering a view, I just go: this.loadCachedView('settings', SettingsView, SettingsCollcetion).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

捎一片雪花 2024-11-12 05:40:01

我通常在控制器中跟踪我的所有视图。然后控制器根据导航事件在可用视图之间切换：

var Switches;
Switches = [];
Skepic.SwitchView = Backbone.View.extend({
    hide: function() {
        return this.el.detach();
    },
    show: function() {
        if (!_.include(Switches, this)) {
            Switches.push(this);
        }
        _.each(Switches, function(s) {
            return s.hide();
        });
        this.container().append(this.el);
        return $('html, body').animate({
            scrollTop: 0
        }, 'fast', "linear");
    },
    container: function() {
        if (this.options.container) {
            return this.options.container;
        } else {
            return $("body > .content");
        }
    }
});

这是一种在一个视图和另一个视图之间切换的基本视图。控制器将创建视图（根据需要获取数据），当您切换时，您可以在视图中覆盖的 show() 函数中进行最后的检查。

（请注意，我在 jQuery 上使用 detach 来仍然使事件委托正常工作）

I usually keep track of all my views in my controller. The controller then switch between available views based on the nav events:

var Switches;
Switches = [];
Skepic.SwitchView = Backbone.View.extend({
    hide: function() {
        return this.el.detach();
    },
    show: function() {
        if (!_.include(Switches, this)) {
            Switches.push(this);
        }
        _.each(Switches, function(s) {
            return s.hide();
        });
        this.container().append(this.el);
        return $('html, body').animate({
            scrollTop: 0
        }, 'fast', "linear");
    },
    container: function() {
        if (this.options.container) {
            return this.options.container;
        } else {
            return $("body > .content");
        }
    }
});

This is kind of the base view to switch between one view and the other. The controller will create the view (fetching data as needed) and when you switch, you can do your last checks in an overriden show() function in the view.

(notice I use detach on the jQuery to still have the event delegation working)

回复收藏 0 原文