Backbone.js(带Require.js)变量/范围访问问题

时间:2012-08-13 16:17:41

标签: javascript backbone.js requirejs

我正在试图找出如何最好地解决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上发推文建议我在全局范围内使用命名空间是我能做的最好的事情,但我会暂时搁置这个问题,看看是否还有其他任何建议突然出现。

3 个答案:

答案 0 :(得分:0)

大师已经说过:)(Addy Osmani)

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

File1.js:

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

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

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我已经决定使用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
    })
});