JavaScript - 模型和 View 模型的客户端分离？

Question

我already asked this question在另一个网站上，但由于它几乎没有引起任何关注(更不用说答案)，我希望它可以放在这里。

我正在使用 Model-View-ViewModel 方法和 Knockout.js 开发 Web 应用程序。阅读 original introduction of MVVM 后作者:John Gossman，我意识到我的 ViewModel 始终包含应用程序的所有逻辑，不仅是 UI 逻辑，而是所有内容。

我在某处读到，使用 Knockout，模型被视为数据库或通常是服务器上的数据。但根据 MVC，该模型还包含对数据进行一些处理且与 UI 无关的函数。

所以我想知道拥有一个独立于 ViewModel 对象的单独 Model 对象是否合理？这背后的想法是 ViewModel 将仅包含 UI 逻辑(如 Gossman 的意图)，而 Model 将仅包含业务逻辑(如 MVC 中)，这与实际的 View 无关。示例:

var viewModel = {
    hint: ko.observable("idle"), //text visible in the View
    buttonClicked: function () {
        this.hint("doing stuff");
        model.doStuff();
        this.hint("done");
    }
};

var model = {
    doStuff: function () {
        //business logic, UI independent
    }
};

是否有可以从 MVVM 模式定义中得出的建议或“最佳实践”？

Answer 1

我认为尝试将纯数据模型与 viewModel 分开会有点模糊，因为 ViewModel 可以包含“派生”列，从而模糊了“模型”与 View 在“viewModel”中需要的内容之间的界限'

我通常使用类(忘记如何分类它们)来封装从真实服务器端模型到我的 View 将使用的 viewModel 的转换...包括派生列(例如 FullName = FirstName + ' ' + LastName)、数据转换(例如日期格式)以及我提供的可用于操作 viewModel 的函数。

实际上，您最终会使用嵌套的类(每个类本身就是一个“viewModel”)来封装复杂的实体，并将转换/函数与它们关联的实体组织在一起。请注意，操作数组的函数的附加级别比它们修改的集合中的实体高一级。

所以书籍 View 模型可能看起来像这样:

MainVM:
  Authors: observableArray
  AddAuthor: function
  RemoveAuthor: function

Author class: 
  FirstName
  LastName
  FullName: (derived)
  Books: observableArray
  AddBook: function
  RemoveBook: function

Book class: 
  Title
  ISBN
  PublishDate (function to format raw date)

此外，UI 逻辑(例如，任何执行 DOM 内容或 Jquery 的内容)不属于这里的任何地方......而是属于自定义的绑定(bind)处理程序或 knockout 扩展。