'Model' 和 'ViewModel' 在 Knockout.js 中

18 浏览
0 Comments

'Model' 和 'ViewModel' 在 Knockout.js 中

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

然而，在Knockout中（采用MVVM），我发现带有字段的对象被称为'ViewModel'。来自官方KO文档：

模型：应用程序的存储数据。该数据表示业务领域中的对象和操作（例如，可以执行资金转移的银行账户），并且独立于任何UI。在使用KO时，通常会调用一些服务器端代码进行读取和写入此存储模型数据的Ajax调用。

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

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

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

所以我有点迷失了。在Knockout.js领域中，“Model”和“ViewModel”到底意味着什么？

0

2 答案

0 Comments

在Knockout.js中，“Model”和“ViewModel”的概念是出现的原因是为了在JavaScript实现的MVVM（Model-View-ViewModel）模式中对数据进行管理和操作的一种方式。通常，Web API提供了“Model”的部分，即提供了页面所需的数据。无论这些数据是否在JavaScript中以一个独立的模型对象的形式存在，这是另一回事。

View Model通常是一个已经通过添加属性和函数来支持特定视图的Model。例如，客户端计算、下拉选择的值、客户端验证等。在这种情况下，View Model可能是这样的：

var vm = {
    save: function(){ save logic... },
    cancel: function(){ cancel logic... },
    states: ko.observable(), //用于状态下拉列表的状态列表
    customerId: ko.observable(),
    customerFirstName: ko.observable(),
    customerLastName: ko.observable()
};

其他情况下，Model将在一个独立的对象中进行维护。在这种情况下，View Model可能是这样的：

var customerModel = getCustomerFromDataSource();
var vm = {
    save: function(){ save logic... },
    cancel: function(){ cancel logic... },
    states: ko.observable(), //用于状态下拉列表的状态列表
    customer: customerModel
};

需要牢记的主要一点是，Model是数据，而View Model是使数据可用于视图的层（通常通过数据绑定）。有时，Model可能是一个独立的类；而有时，Model只是View Model中已知的一组属性。

这种定义方式在某种程度上是有道理的，但与Rails等框架中的定义有所不同。在Rails中，Model是ORM（对象关系映射），而实际的数据存储在数据库中。Knockout定义的“Model”似乎是Rails中所称的数据库，而Knockout没有内置的方法来查询数据。

0
0 Comments

在Knockout.js中，出现了'Model'和'ViewModel'的问题。这个问题的出现是因为在Knockout.js中，Model、View和ViewModel是三个不同的概念。

Model是用来保存信息的，但通常不处理行为。

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

ViewModel位于UI层的后面。它公开了View所需的来自Model的数据，并且可以被视为我们的View获取数据和执行操作的来源。

通常情况下，Model是以JSON或其他格式从服务器传输的数据本身，而不是被展示出来。这是我能想到的唯一解释。如果我错了，请告诉我为什么var aViewModel = { contactName: ko.observable('John'); };是一个ViewModel，而var Todo = function (content, done) { this.content = ko.observable(content); this.done = ko.observable(done); this.editing = ko.observable(false); };是一个Model？它们之间没有区别。

大多数情况下，Model来自Web API，我们直接在ViewModel中使用它。另一种方式是在MVVM中为其创建一个单独的Model。

感谢你的解释，你链接的jsfiddle解释得很清楚。但不幸的是，我只能点赞你的回答，而不能接受它，因为Joseph在几个小时前已经解释了困难的部分（Model的隐藏位置）。

0