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

Question

我刚刚开始搞乱Knockout JS,我有以下的观点(例子).

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

我的问题是,我应该有一个包含我的1个主视图模型TouristsViewModel和TouristsInfoViewModel-这意味着TouristsViewModel要与主为了改变耦合TouristsInfoViewModel,或者我应该TouristsViewModel实例化TouristsInfoViewModel,并调用ko.applyBindings？

我看过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的延期承诺将帮助你.您的存储库应该返回承诺.
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将显示旅游信息.他们俩都不知道对方.我最近参与了一个有类似要求的项目.演讲者,演讲者详细信息,会话,会议详情.我的视图模型都不知道另一个.它们都通过客户端路由和散列更改事件进行管理.