Backbone.js Master-Detail场景

Ron*_*nie 5 backbone.js

我有一个经典的主 - 细节场景,我在backbone.js中实现.

目前我并不关心backbone.js的历史和导航部分,所以我正在跳过它.

  • 我有一个GridView,其中所有模型都从休息服务中获取并显示.
  • 我有一个DetailView(模态窗口),其中显示来自网格的特定选定模型,其中更多字段出现在主网格视图中.

我已实施:

  • 所有主干视图和路由器都连接在一起的主应用程序.
  • 应用程序在加载的文档上初始化
  • 一个主要的Backbone路由器(更像是一个经典的"控制器"),负责:
    • 创建和销毁视图
    • 获取和发布数据
    • 将数据传递给视图
    • 协调观点事件

现在,从gridView(Backbone集合)的其余服务返回的数据只是模型的一些部分数据.

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

从模型中获取最终的模型与集合断开连接,对它的任何更新都没有反映在集合本身上,我必须再次刷新获取所有数据的主视图.

销毁和重新创建详细信息视图有时会使视图事件失效.

这种情况的正确实施是什么?我并不完全了解骨干做事的最佳方式.

Edw*_*ith 7

首先,我建议在"gridView"集合查询中返回模型的完整细节.这解决了"断开连接的集合"问题.

虽然,您不必进行完整的集合加载 - 假设为整个集合执行完全加载不起作用 - 细节太大,例如,您应该能够从中传递相同的模型收集到您的详细信息视图中,测试它是否为部分加载或满载,并为模型发出"fetch()",返回完整数据 - 因为这与集合中的模型相同,它应该得到更新.那有意义吗?

此外,对于详细视图,我建议,特别是如果您只设计调用一个详细视图活动,重用视图并在视图中编写一个允许您交换模型的函数.

所以,总结一下:

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