【问题标题】:responsibility of model in MVVMMVVM中模型的职责
【发布时间】:2013-04-03 15:00:27
【问题描述】:

这个问题更多地与如何构建代码有关,或者更准确地说是关于使用 Knockout 的 MVVM 模式中模型的职责。我正在使用带有 Durandal 的 Knockout,但这个问题可能是 MVVM 模式的通用问题。例如

我有这样的模型:

var Model = function(data){
      this.name = data.name;
      this.count = ko.observable();
};

Model.prototype.getCount = function(){
       var self = this;
       setInterval(function(){
             //some ajax call to get the count
             self.count(data.count);
       }, 1000);

};

我的 viewModel 收集了我的模型,例如:

var ViewModel = function(){
       this.models = ko.observableArray([]);
       //ajax call to get the required data
       data.Items.forEach(function(item){
             var model = new Model(item);    
             model.getCount();
             this.models.push(model); 
       }
};

现在是我的观点

<div data-bind="foreach: models">
    <div data-bind="text: name"></div>
    <div data-bind="text: count"></div>
</div>

我的问题是因为我的模型具有可观察的属性,并且每当属性更改时,它都会更新视图。但从本质上讲,它是一个模型,更新 UI 的责任应该完全由视图模型负责。

因此,与更新计数相关的代码本质上应该是getCount,存在于视图模型上,而模型不适合它。哪些代码应该保留在 viewModel 或模型中的区别在哪里?

【问题讨论】:

  • Model 代表系统中的实体,而 ViewModel 是 UI 模型。模型应该与持久性/后端交互以更新自身。 ViewModel 将在模型和 UI 之间架起一座桥梁(两种方式)。后端 模型 ViewModel 视图
  • 在上述情况下,我的模型与后端交互以更新它的计数值,此外它还有一个可观察的属性,它有两种方式绑定到视图。但是在阅读了下面的答案后,我更倾向于将其视为 viewModel。如果我错了,请纠正我。
  • 对于 UI 绑定,您的 Model 和 ViewModel 都是 ViewModel。但是,不要忘记 Model 是域模型,例如用户、产品等,而 ViewModel 是特定于 UI 的。

标签: javascript mvvm knockout.js durandal


【解决方案1】:

老实说,我会将您的模型归类为视图模型。您的模型是您从 Ajax 调用中返回的 json 对象,您可以为每个对象创建一个视图模型。就我而言,嵌套视图模型没有问题。

【讨论】:

  • 我对整个概念和您的回答以及其他人的回答进行了一些思考,帮助我消除了我的疑虑和困惑。谢谢!!
【解决方案2】:

Knockout 并未真正实现 MVVM;它更像是 VVM。其他库,如 Backbone 等,使用模型;淘汰赛真的不行。在 Knockout 中,您的 MVVM 的“模型”是您的服务器端数据库实体。

【讨论】:

  • 授予服务器端实体是模型,但您可以用更多属性(计算等)装饰该实体。您的视图模型本质上是该模型和您的视图之间的桥梁,因此视图上的操作将由视图模型处理,并负责对底层模型进行更改。所以 ViewModel 是包含模型并使其可用于视图的东西。因此,模式-视图-视图模型。你同意吗?
  • 不过,我认为您更多的是转换而不是真正的模型。如果您将模型传递给视图并“装饰它”,或者即使您根本不修改它(尽管这很奇怪),它现在仍然是“视图模型”,而不是模型。您可能会认为它在实例化视图模型时短暂存在于客户端,但之后它几乎被丢弃了。要更新模型,您将发出 AJAX POST 来修改服务器端实体,而不是它的某些客户端版本。
  • 说得对。我同意。
猜你喜欢
  • 2013-12-09
  • 1970-01-01
  • 2019-04-09
  • 1970-01-01
  • 2013-11-29
  • 1970-01-01
  • 2011-11-02
  • 1970-01-01
  • 2013-01-19
相关资源
最近更新 更多