Knockout.js 中的“模型”和“视图模型”

Question

在 MVC 中，“Model”只是数据的代码表示（例如，在 ASP.NET MVC 中，它是一个具有相应字段的类）。

然而，在 Knockout（它使用 MVVM）中，我看到带有字段的对象被称为“ViewModel”。来自官方 KO 文档：

模型：您的应用程序存储的数据。此数据代表对象 和您的业务领域中的操作（例如，可以 执行汇款）并且独立于任何用户界面。使用KO时， 您通常会对一些服务器端代码进行 Ajax 调用以读取和 写入这个存储的模型数据。

视图模型：数据和操作的纯代码表示 一个用户界面。例如，如果你正在实现一个列表编辑器，你的视图 模型将是一个包含项目列表并公开方法的对象 添加和删​​除项目。

从示例中可以看出，ViewModel 是具有字段的对象，保存数据，这通常由 MVC 中的 Model 完成：

var myViewModel = {
    personName: ko.observable('Bob'),
    personAge: ko.observable(123)
};

所以我在这里有点迷路了。 Knockout.js 域中的“模型”和“视图模型”到底是什么意思？

Answer 1

在 JavaScript 实现的 MVVM 模式中，“模型”部分通常由 web api 提供。提供给页面的数据就是模型。现在，该数据是否包含在 JavaScript 中后是否包含在单独的模型对象中 - 那是另一回事了。

通常一个视图模型只是一个增加了属性和函数的模型以支持它所应用的特定视图。客户端计算、下拉查找值、客户端验证例程等。在这种情况下，视图模型可能如下所示：

var vm = {
    save: function(){ save logic... },
    cancel: function(){ cancel logic... },
    states: ko.observable(), //list of states for state dropdown
    customerId: ko.observable(),
    customerFirstName: ko.observable(),
    customerLastName: ko.observable()
};

其他时候，模型将保存在单独的对象中。在这种情况下，视图模型可能如下所示：

var customerModel = getCustomerFromDataSource();
var vm = {
    save: function(){ save logic... },
    cancel: function(){ cancel logic... },
    states: ko.observable(), //list of states for state dropdown
    customer: customerModel
};

要记住的主要事情是模型是数据，而视图模型是使您的模型可用于视图的层（通常通过数据绑定）。有时模型可能是一个单独的类；其他时候，模型只是视图模型中的一组已知属性。

Answer 2

型号
模型保存信息，但通常不处理行为

视图
View 包含需要了解 Model 和 ViewModel 的数据绑定、事件和行为。虽然这些行为可以映射到属性，但 View 仍然负责处理 ViewModel 的事件

ViewModel
ViewModel 位于我们的 UI 层后面。它公开了视图（来自模型）所需的数据，并且可以被视为我们的视图用于数据和操作的源。

您可以在以下链接中找到更多信息 here
您还可以在stackoverflow question中找到有关 mvc 和 mvvm 的更多信息