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