如何从骨干路由器访问另一个文件中的骨干视图答案

【问题标题】：How to access a backbone view in another file from backbone router如何从骨干路由器访问另一个文件中的骨干视图
【发布时间】：2014-04-09 15:41:33
【问题描述】：

我有一个运行良好的主干应用程序，但放在一个文件中有点重，所以我开始将它分成不同的文件，我现在拥有：

backbone-view.js
backbone-router.js
...

当 URL 发生如下变化时，我正在使用我的主干路由器来实例化视图：

var Router = Backbone.Router.extend({
    routes: {
        'our-approach.php': 'instantiateOurApproach',
        'our-work.php': 'instantiateOurWork',
        'who-we-are.php': 'instantiateWhoWeAre',
        'social-stream.php': 'instantiateSocialStream',
        'contact.php': 'instantiateContact'
    },
    instantiateOurApproach: function() {
        if(window.our_approach_view == null) {
            window.our_approach_view = new OurApproachView();
        }
    },

    instantiateOurWork: function() {
        if(window.our_work_view == null) {
            window.our_work_view = new OurWorkView();
        }
    },

    instantiateWhoWeAre: function() {
        if(window.who_we_are_view == null) {
            window.who_we_are_view = new WhoWeAreView();
        }
    },

    instantiateSocialStream: function() {
        if(window.social_stream_view == null) {
            window.social_stream_view = new SocialStreamView();
        }
    },

    instantiateContact: function() {
        if(window.contact_view == null) {
            window.contact_view = new ContactView();
        }

    }
});

我现在遇到的问题是我无法访问视图，因为它们是在单独的文件中声明的，所以以下都是未定义的：

OurApproachView()
OurWorkView()
WhoWeAreView()
SocialStreamView()
ContactView()

我已经尝试过：

window.OurApproachView()

但这不起作用。

我不确定我的下一步行动是什么，所以如果有人能提供帮助，那就太棒了。

谢谢！

编辑

好吧，看来是这样：

window.OurApproachView()

确实有效，我很抱歉，但有人有更好的建议吗？

【问题讨论】：

标签： javascript backbone.js backbone-views backbone-routing

【解决方案1】：

您可以采用这种方法：

// sample-view.js

var app = app || {};

$(function() {
    app.SampleView = Backbone.View.extend({
        el: '#sample-element',

        template : // your template

        events: {
        // your events      
        },

        initialize: function() {
            // do stuff on initialize
        },

        render: function() {
         // do stuff on render
        }
    });
});

同样，您的所有 js 文件（模型、集合、路由器）都可以这样设置。然后，您可以通过执行以下操作从路由器访问任何视图：

var view = new app.SampleView();

【讨论】：

我喜欢它，谢谢，我会试一试。我认为这是同一个窗口是否正确。但它只是一个自定义变量吗？

【解决方案2】：

这行得通：

window.our_work_view = new window.OurApproachView();

但我不喜欢它作为解决方案。

有人推荐更好的吗？

【讨论】：