Backbone.js（带有 Require.js）变量/范围访问问题答案

【问题标题】：Backbone.js (with Require.js) variable/scope access issueBackbone.js（带有 Require.js）变量/范围访问问题
【发布时间】：2012-08-13 16:17:40
【问题描述】：

我正在尝试找出如何最好地解决 Backbone.js/Require.js 的架构问题

我这里有一个测试项目：https://github.com/Integralist/Backbone-Playground

我遇到的问题是我在我的主脚本文件中创建一个视图，然后在另一个视图脚本文件中我试图访问另一个视图，但我不知道该怎么做设置全局变量/属性？

https://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/App/main.js#L73 是我设置全局的位置，https://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/Views/Contacts.js#L34-35 是我访问它的位置。

我似乎无法理解如何访问它。

我知道这只是一个全局设置，如果我必须保持这样，那么我还可以通过像这样命名全局来限制任何损坏：window.myapp.contact_view = new ContactView(...) 但这对于这种类型的范围问题。

非常感谢任何建议。

更新：来自 Google 的 Addy Osmani 已经在推特上向我建议，在这种情况下，我可以做的最好的事情是命名我的全局，但我将把这个问题留待一段时间，看看是否有任何其他建议突然出现。

【问题讨论】：

标签： javascript backbone.js requirejs

【解决方案1】：

大师说过 :) (Addy Osmani)

恕我直言，这是您可以/应该做的事情 - 将您的代码包装在一个自动执行的功能块中：

文件1.js：

(function(myNameSpace){
 // do something
 myNameSpace.sharedValue = something();

})(window.myNameSpace = window.myNameSpace || {});

在 File2.js 中重复完全相同的代码（结构）

最后一行确保无论哪个文件首先加载，对象都会被创建，然后在文件中使用相同的对象。将相同的参数传递给函数允许您访问函数本身中的myNameSpace 对象。

其他文件可以按照他们认为合适的方式扩展/扩充/使用该对象。除了公开全局变量之外，基本上没有办法在 javascript 中（跨文件）共享变量，但可以以一种很好的方式完成 :)

【讨论】：

【解决方案2】：

为 ContactsView.js 试试这个：

define([ 'backbone' ], 
function(B) {

  return B.View.extend({

    display_selected: function(event) {
      this.options.contactView.render(model);
    }

  })

})

在您的代码中，

new ContactsView({
  contactView: new ContactView( ... ) 
})

无论如何，您可能应该从 ContactsView 创建注入的视图，并将所需的信息作为额外的选项值传递。

【讨论】：

【解决方案3】：

我已经决定我最好的选择是使用 Addy Osmani 建议的全局命名空间，但是我认为如果我需要一个替代选项，那么我只需像这样设置一个特定于实例的属性：

contacts_view.contact = new ContactView({
    el: $('#view-contact')
});

然后我可以像这样从contacts_view 中访问视图的render() 方法...

var ContactsView = Backbone.View.extend({
    events: {
        'change select': 'display_selected'
    },

    display_selected: function (event) {
        this.contact.render(model);
    }
});

...这感觉比单一的全局命名空间选项更干净，但我担心如果我最终需要将多个视图绑定到 ContactsView，这种替代解决方案可能会变得混乱。我不知道为什么我需要绑定多个视图，但它仍然是一个等待发生的潜在混乱，所以我认为拥有一个全局命名空间是最好的选择（目前）。

更新：我意识到我可以在创建 View 实例时传入额外的数据，这就是我在这里所做的......

var contacts_view = new ContactsView({
    el: $('#view-contacts'),
    collection: contacts,
    associated_view: new ContactView({
        el: $('#view-contact'),
        collection: contacts
    })
});

【讨论】：