Backbone.js 主从场景

Question

我有一个经典的 master-detail 场景，我正在backbone.js 中实现。

目前我不关心backbone.js的历史和导航部分，所以我跳过它。

• 我有一个 GridView，其中所有模型都是从休息服务中获取和显示的。
• 我有一个 DetailView（模态窗口），其中显示了从网格中选择的特定模型，并且在主网格视图中显示了更多字段。

我已经实现了：

• 连接所有主干视图和路由器的主要应用程序。
• 应用程序在加载文档时初始化
• 一个主骨干路由器（更像是一个经典的“控制器”），负责：
  • 创建和销毁视图
  • 获取和发布数据
  • 将数据传递给视图
  • 协调视图事件

现在从其余服务返回的gridView（Backbone集合）的数据只是模型的部分数据。

因此，要显示特定模型的完整详细信息，我必须再次从其余服务中获取详细信息。

从模型中获取最终会导致模型与集合断开连接，并且它的任何更新都不会反映在集合本身上，我必须再次刷新获取所有数据的主视图。

销毁并重新创建详细信息视图有时会使其失去视图事件。

这个场景的正确实现是什么？ 我没有完全理解在主干中做事的最佳方式。

Answer 1

首先，我建议在“gridView”集合查询中返回模型的完整详细信息。这解决了“断开连接”的问题。

虽然，您不必执行完整的集合加载 - 假设为整个集合执行完整加载是行不通的 - 细节太大，例如，您应该能够传递相同的模型从集合到您的详细视图，测试它是部分加载还是完全加载，并为模型发出“fetch()”，返回完整数据 - 因为这是与集合中相同的模型，应该更新。这有意义吗？

另外，对于细节视图，我建议，特别是如果您的设计只调用一个激活的细节视图，重用视图并在视图中编写一个函数，允许您换出模型。

所以，总结一下：

• 在应用程序启动时，加载一个 gridView 和一个 detailView。
• 重构您的 detailView 以允许在其上设置模型。 (detailView.setModel(..)
• 当用户想要查看模型的详细信息时，使用上述函数将该模型传递到 detailView。
• 如果模型没有完全加载，您的 setModel 方法可以去 fetch() 其余数据。您可以测试仅在满载时才会出现的特定属性，也可以在模型上设置一个属性以指示其是否已满载。
• 如果您发现自己丢失了事件，请尝试在您的 render() 函数结束时调用 delegateEvents()，它会重新绑定事件。
• 由于在 gridView 集合和 detailView 中使用相同的模型，假设您正确响应更改事件，所有内容都应该同步。