javascript - 标准菜单栏/详细信息页面移动 UI 的主干 View 设计

Question

我正在构建一个移动网络应用程序，并且一直在努力设计和连接我的主干 View 。

让我说明一下我想要实现的目标。

如您所见，上图标识了几个 UI 组件:

• 带有后退、搜索和菜单按钮的工具栏 View
• 带列表的标签 View
• 详细 View
• 菜单 View

关于行为的一些注释:

• 点击菜单按钮会覆盖菜单并使菜单呈现动画效果。
• 可以使用主题标签永久访问列表和详细信息 View

现在我已经为工具栏、菜单、列表和详细信息创建了 View 。但显然 View 之间必须有一些交互，我不确定如何处理它。

要解决的问题:

1. 在查看详细信息或列表时是否呈现所有 View ？如果不是，如何更新工具栏并处理该关系
2. 当从选项卡 2 转到详细信息并返回列表时，如何记住显示了哪个选项卡。记住带有标签的可见标签不是一种选择，因为不应该记住标签之间的切换。

我一直在调查 tbranyen layoutmanager但它似乎仍然假设完全孤立的观点。

Answer 1

我使用 Backbone.Marionette 取得了一些成功对于这种事情。它允许您在应用程序中定义区域，然后独立管理在这些区域中显示的 View 。

因此工具栏将是一个区域，而主要区域将是一个区域。然后当在列表和详细信息之间切换时，您只需将列表/详细信息 View 插入主要区域，而单独保留工具栏区域。然后，Backbone Marionette 将负责确保呈现正确的 View 并从 DOM 等中删除元素。

至于记住可见选项卡是什么，你能不能把它存储在选项卡 View 的变量中？或者在某个顶级应用程序对象上？