1

问题：

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

  1. 顶部菜单：选项（真或假）
  2. 左侧菜单：A、B、C、D 等项目列表
  3. 表单内容：一个表单。根据 的值，它是可见的还是隐藏Top menu's Option的。其内部内容因Left menu's item所选内容而异。例如，A selected 将显示 2 个输入框，而 B 将显示 3 个输入框，等等...

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

顶部菜单有TopMenu型号

{
isSelected: false
}

左侧菜单中LeftMenuCollection包含此类模型

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

表单内容太长FormContentModel，无法放在这里。

我有 2 种观点：TopMenuViewand LeftMenuViewforTopMenu和LeftMenuCollection. 但是表单内容视图（let call）的视图必须从两者中FormContentView获取值，以便知道何时可见以及可见后显示什么。TopMenuLeftMenuCollection

目前的想法：

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

  2. TopMenuViewFormContentView将触发可见。

  3. 然后FormContentView会被存入自己的FormContentCollection。

对于#1 和#2，我只使用了像这里这样的 PubSub 模型：在主干中从一个视图触发一个事件到另一个视图

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

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

问题：

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

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

4

1 回答 1

2

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

我更喜欢将 PubSub 直接附加到 Backbone 对象，并且在主干加载后立即执行此操作。（我之前写过：Backbone.js 全局通知）

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

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

（请注意，您可以向视图添加第二个模型，它们不必设置为 view.model）

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

于 2012-10-18T12:32:47.063 回答