mvvm - knockout ViewModel 分离，一般方法/最佳实践是什么？

Question

我刚开始搞砸 Knockout JS，我有以下场景(示例)。

我有一个游客名单，这个名单有 CRUD 方法——一切都很好。现在，当我单击一个游客时，将显示更详细的描述 - 这是对服务器的新 AJAX 调用以获取该信息。

我的问题是，我是否应该有 1 个包含我的 TouristsViewModel 的主视图模型？和 TouristsInfoViewModel - 这意味着 TouristsViewModel应该加上master才能修改TouristsInfoViewModel ，或者应该我的TouristsViewModel实例化 TouristsInfoViewModel并调用ko.applyBindings ?

我看过 Knockout-postbox ，但我想避免引入太多的 3rd 方插件。

总结一下:分离 View 和 View 模型同时能够在它们之间共享数据的一般方法是什么？

Answer 1

这是一个通用的方法。

花时间学习 AMD，require.js 就是一个很好的库。

保持你的 View 模型分开，不要耦合它们。

knockout 邮箱、amplify.js pub/sub 非常适合相互交流。

查看单页应用程序框架。杜兰达尔是个不错的选择。

如果您不打算使用 Durandal 或 SPA，即使这样，也可以创建一个单独的模块来处理您的 knockout 绑定(bind)。

每个 View 都应该有一个对应的 View 模型。

将您的 ajax 调用分离到它自己的模块中。例如: TouristRepository.js 可能是一个模块，它将为您进行所有 ajax 调用。

与 promise 一起工作。 Q.js 或 jquery 的延迟 promise 会帮助你。您的存储库应该返回 promise 。

您的 View 模型应该就是这样......本质上，它应该保持状态并提供 View 交互处理程序。模型应该是它自己的文件。然后 ViewModel 可以保存模型数据。

模型数据只能通过存储库检索。

我认为这将是一种不错的方法，并且对您有用。

编辑 - 根据评论添加更多内容。

1)您可以在requirejs中使用shimming和exports来加载ko验证插件，而不是使用define。除非你一开始没有使用 requirejs 来加载它。

2) 使用 pub/sub 不是耦合。当一个模块完全依赖于另一个模块的功能或存在时，就会发生耦合。考虑到 MasterViewModel 直接与另一个 viewmodel 通信是耦合的。在发布/订阅场景中，您的一个 View 模型(称为 Persons.js)是说保存一个人对象。保存后，应该会更新本地缓存。在这种情况下，Persons.js 在保存后会发出一条消息，说“已保存人员”并传递它拥有的所有数据。 ClearCache.js 负责清除缓存。它只是在监听“人员已保存”消息以采取一些行动。耦合方式是 Persons.js 实例化 ClearCache 并直接调用它的 clearCache 方法。因此，要存在 Persons.js，clearCache.js 必须存在。而在 pub/sub 中，即使 clearCache.js 不存在，Persons.js 也可以继续存在。

3) 这个问题的答案完全取决于您的应用要求。通常，我有一个名为 binder.js 的中间模块。 binder.js，监听消息。因此，假设用户想要查看详细信息并点击游客。 TouristsViewModel 将发布消息“Tourist Detail Requested”并传递一个游客 ID 或一些信息。绑定(bind)器正在监听这个，知道要实例化哪个 View 模型以及要采取什么行动。这样一来，您的 ToursistsViewModel 就完全不知道 TouristsInfoViewModel。如果在另一个 View 中，您列出了所有游客的名字和姓氏并且不必显示详细信息，则可以重复使用 TouristsViewModel，而无需引入 TouristsInforViewModel。在这种情况下不需要 MasterViewModel。

您的应用程序听起来像是单页应用程序的完美候选者。遵循“一个 View - 一个 ViewModel”方法和“单一职责”方法。 TouristsViewModel 只显示游客，TouristInfoViewModel 将显示游客信息。两个人都对彼此毫 headless 绪。我最近在一个有类似要求的项目上工作。演讲者，演讲者详细信息， session ， session 详细信息。我的 View 模型都不知道另一个。它们都通过客户端路由和哈希更改事件进行管理。