Knockout ViewModel分离，最新方法/最佳实践是什么？

Question

我刚开始搞乱Knockout JS，我有以下情况（例子）。

我有一个游客列表，这个列表有CRUD方法 - 一切都很棒。现在，当我点击一个游客时，将会显示一个更详细的描述 - 这是对该信息的服务器的新AJAX调用。

我的问题是，我是否应该拥有包含TouristsViewModel和TouristsInfoViewModel的1个主视图模型 - 这意味着TouristsViewModel应该与主文件结合以修改{ {1}}，或者TouristsInfoViewModel实例化TouristsViewModel并致电TouristsInfoViewModel？

我看过Knockout-postbox，但我想避免引入过多的第三方插件。

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

Answer 1

这是一般方法。

1. 投入时间学习AMD，require.js就是一个很棒的图书馆。
2. 保持您的视图模型分开，不要将它们耦合在一起。
3. knockout-postbox，amplify.js pub / sub非常适合彼此沟通。
4. 查看单页应用程序框架。杜兰达尔是一个很好的选择。
5. 如果您不打算使用Durandal或SPA，即使这样，也可以创建一个单独的模块，用于处理您的淘汰赛。
6. 每个视图都应该有一个相应的视图模型。
7. 将您的ajax调用分离到自己的模块中。例如：touristRepository.js可能是一个模块，它会为你做所有的ajax调用。
8. 使用承诺。 Q.js或jquery的延期承诺将帮助你。你的存储库应该返回promises。
9. 你的viewmodels应该只是......实质上，它应该保持状态并提供视图交互处理程序。该模型应该是它自己的文件。然后，ViewModel可以保存模型数据。
10. 只能通过存储库检索模型数据。

我认为这将是一种体面的方法，对你有用。

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

1）您可以在requirejs中使用填充和导出来加载ko验证插件，而不是使用define。除非你没有使用requirejs来加载它。

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

3）这个问题的答案完全取决于您的申请要求。通常，我有一个名为binder.js的中间模块。 binder.js，侦听消息。所以，假设用户希望查看详细信息并点击游客。 TouristsViewModel将发布消息“旅游详细请求”并传递旅游ID或一些信息。绑定器正在监听，知道要实例化哪个视图模型以及要采取的操作。这样，您的ToursistsViewModel完全不了解TouristsInfoViewModel。如果在另一个视图中，您列出了所有游客的firstNames和lastNames并且不必显示详细信息，您可以重新使用TouristsViewModel而无需不必要地引入TouristsInforViewModel。在这种情况下不需要MasterViewModel。

您的应用程序听起来像是单页应用程序的完美候选者。遵循“One View - One ViewModel”方法和“单一责任”方法。 TouristsViewModel仅显示游客，TouristInfoViewModel将显示旅游信息。他们俩都不知道对方。我最近参与了一个有类似要求的项目。演讲者，演讲者详细信息，会话，会议详情。我的视图模型都不知道另一个。它们都通过客户端路由和散列更改事件进行管理。