Question

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

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

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

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(...)但这对于这个感觉就像一个丑陋的解决方法范围问题的类型。

任何建议都非常感谢。

更新：来自谷歌的Addy Osmani已经在Twitter上发推文建议我在全局范围内使用命名空间是我能做的最好的事情，但我会暂时搁置这个问题，看看是否还有其他任何建议突然出现。

Answer 1

大师已经说过:)（Addy Osmani）

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

File1.js：

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

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

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

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

其他文件可以根据需要扩展/扩充/使用对象。基本上除了暴露全局变量之外，没有办法在javascript（跨文件）中共享变量，但可以以一种很好的方式完成：）

Answer 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创建注入视图，并将所需信息作为额外选项值传递。

Answer 3

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

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

然后，我可以在render()内访问View的contacts_view方法，就像这样......

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

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

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

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

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

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

3 个答案: