0

我试图弄清楚如何最好地解决 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 已经在推特上向我建议，在这种情况下，我可以做的最好的事情是命名我的全局，但我将把这个问题留待一段时间，看看是否有任何其他建议出现。

4

3 回答 3

0

大师说过:) (Addy Osmani)

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

文件1.js：

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

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

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

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

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

于 2012-08-13T22:39:42.433 回答
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 创建注入的视图，并将所需的信息作为额外的选项值传递。

于 2012-08-14T17:32:44.433 回答
0

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

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

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

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

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

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

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

var contacts_view = new ContactsView({
    el: $('#view-contacts'),
    collection: contacts,
    associated_view: new ContactView({
        el: $('#view-contact'),
        collection: contacts
    })
});
于 2012-08-15T14:02:54.430 回答