使用Knockout.js的MVVM

Question

我正在尝试实现基于MVVM的单页面应用程序,目前正在使用框架Knockout.js来处理MVVM的viewmodel/view部分.我很困惑,因为我所看到的实现Knockout的每个例子都涉及将整个视图模型保存到数据库中.这些示例是否缺少"模型"步骤,其中视图模型与数据层模型同步,模型执行验证/服务器同步.

我想在单个页面上有多个不同的模板/视图,每个模板/视图都有不同的视图模型.我发现的另一件事是缺少knockout.js正在跨不同视图同步单个模型(而不是viewmodel).我认为每个视图共享一个巨型视图模型是不合理的,所以我认为每个视图都有自己的视图模型,但每个视图模型都会与几个应用程序范围的模型的字段同步.每个视图.

我正在处理的页面获取了一个巨大的模型(30多个字段,多层父/子关系),我认为让我的所有视图模型与此模型同步是有意义的.我调查了Knockback.js(结合了knockout.js和backbone.js)但是我最终重写了大部分函数,​​比如fetch,set,save,因为页面是从API获取数据的(我可以不只是与服务器来回同步整个模型,所以我决定反对它.

我的应用程序的可视示例:

(模型层)M | 中号

(viewmodel/view layer)VM-V | VM-V | VM-V | VM-V

另一个例子

一个示例模型是User = {firstName:"first",lastName:"last",...}

一个viewmodel只需要名字,另一个viewmodel只需要姓氏
ViewModelA = {firstName:app.User.firstName()}
ViewModelB = {firstName:app.User.lastName()}

唯一的方法是为Model和Viewmodel更改定义pub/sub系统吗？这甚至是好的/可维护的架构吗？我在这里错过了一个基本概念吗？欢迎所有建议.

Answer 1

如果我读得正确的话,这里有很多问题都集中在如何使用Knockout构建MVVM/SPA.正如你所指出的,有一些事情需要解决.一个是如何在视图模型/视图对之间进行通信.

Master ViewModel 执行此操作的一种方法是将主视图模型作为@Tyrsius的答案.您的shell可以有一个可以绑定更多可用数据的viewmodel.主视图模型也可以编排子视图模型.如果你走这条路,那么你必须小心将外壳绑定到主视图模型,将内层绑定到DOM中的特定HTML元素.如果需要,主视图模型可以促进它们之间的通信.

解耦的View/ViewModel对 另一个选项是使用viewmodel/view对而没有master viewmodel.每个视图都加载到DOM的一个区域中并自行绑定.它们作为独立的单元,彼此分离.您可以使用pub/sub然后在它之间进行交谈,但如果您需要的是通过observable同步数据的方式,Knockout提供了许多选项.我喜欢的是拥有每个viewmodel表面模型对象.因此,视图具有视图模型,该视图模型表示特定于视图的数据(来自模型).如此多的视图模型可能以不同的方式呈现相同的模型.因此,当视图更新viewmodel属性(即在模型中)时,它会涟漪到任何其他也使用相同模型的加载视图模型.

DataContext 更进一步,您可以创建一个datacontext模块来管理模型中的数据.你向datacontext询问一个模型(例如:客户列表),并且datacontext检查它是否已经存在,如果没有,它会从ajax调用中获取它们.从视图模型和模型中抽象出来的任何一种方式.datacontext获取数据并将模型返回到viewmodel.这种方式非常分离,但您可以通过datacontext共享数据(模型).

我可以继续......但请告诉我这是否回答你的问题.如果没有,很高兴回答任何其他细节.

**免责声明:我正在SPA上建立一个Pluralsight课程(使用Knockout和这个策略):-)