javascript - 具有 Backbone 样板的 PubSub？

Question

问题:

我在屏幕上有 3 个 UI 组件:

1. 顶部菜单:选项(对或错)
2. 左侧菜单:A、B、C、D等项列表
3. 表单内容:表单。它是可见还是隐藏取决于Top menu's Option的值。其内部内容根据选择的 Left menu 的项目 而有所不同。比如A选中会显示2个输入框，B会显示3个输入框，等等...

它的工作方式是用户选择左侧菜单项，然后单击顶部菜单的选项，然后将显示表单内容。

Top menu有TopMenu模型

{
isSelected: false
}

Left menu 有 LeftMenuCollection 包含这样的模型

{
id: 0
label: "No label yet"
}

Form content 有 FormContentModel 太长，不能放在这里。

我有 2 个 View :TopMenuView 和 LeftMenuView 用于 TopMenu 和 LeftMenuCollection。但是表单内容 View 的 View (我们调用 FormContentView)必须从 TopMenu 和 LeftMenuCollection 中获取值，以便知道什么时候 可见以及什么可见后显示。

当前想法:

1. 用户在 LeftMenuView 上的操作将触发事件，FormContentView 将根据所选内容在隐藏的 DOM 中填充 HTML。

2. TopMenuView 将触发 FormContentView 为可见。

3. 然后 FormContentView 将被保存到它自己的 FormContentCollection 中。

对于#1 和#2，我只是像这里一样使用 PubSub 模型:fire an event from one view to another in backbone

但自从我使用 Backbone Boilerplate https://github.com/tbranyen/backbone-boilerplate .我打算这样做，因为 app 对象已经在 app.js 中创建:

app.PubSub = _.extend({}, Backbone.Events)

问题:

如何以及在何处创建该 PubSub 对象？它在 router.js 中吗？

PubSub 是执行此操作的正确方法吗？我也在考虑通过将 TopMenu 和 LeftMenuCollection 组合在另一个 FormContentCollection 下来考虑“复合模型”，但互联网上的大多数人都说使用 PubSub。

Answer 1

定义“app”变量后立即创建 pubsub。

我更喜欢将 PubSub 直接附加到 Backbone 对象，并且我会在 backbone 加载后立即执行此操作。 (我之前写过:Backbone.js global notifications)

这是另一个可能更简单的想法:

创建一个新模型并在所有 View 之间共享它。

(请注意，您可以向 View 添加第二个模型，它们不必设置为 view.model)

Left 和 Top View 可以 .set() 其属性，而 Form View 可以使用 .on('change', function...) 绑定(bind)到更改并通过显示/隐藏 View 进行响应。