Model View ViewModel / Knockout 解决了什么问题？ [关闭]答案

【问题标题】：What does Model View ViewModel / Knockout solve? [closed]Model View ViewModel / Knockout 解决了什么问题？ [关闭]
【发布时间】：2014-04-26 14:47:45
【问题描述】：

我在阅读某人的代码时遇到了 Knockout 和 MVVM。我对这两个主题都做了一些阅读，但我仍然对它们真正解决了什么问题感到困惑，这很可能是因为我还没有构建足够大的应用程序来解决这个框架/架构解决的问题。

我花了一些时间来理解这个来自 Knockout 主页的示例代码 -- http://knockoutjs.com/img/homepage-example.png。我希望有人可以向我解释如果不使用 Knockout 相同的代码会是什么样子，以及这可能会出现问题。

（SO 可能不是这个问题的正确平台，所以如果有其他更合适的 Exchange，请告诉我）。

谢谢！

【问题讨论】：

我想作为这个问题的答案（因为太宽泛而被搁置），我唯一想要的就是看看上面的代码示例在没有 Knockout 的情况下会是什么样子，并用几行来解释原因没有 Knockout 的相同代码在大型应用程序中可能不受欢迎。谢谢！

标签： mvvm knockout.js

【解决方案1】：

从 10,000 英尺开始

Knockout 在用 HTML 编写的 view 和用 JavaScript 编写的 viewmodel 上的相应属性和函数之间提供双向数据绑定。

假设您有一个名为 contacts.html 的 HTML 视图和一个名为 contacts.js 的 JavaScript 视图模型。这两者一起构成了一个模块，而 Knockout 就是将它们粘合在一起的粘合剂。

MVVM 代表模型视图视图模型。我在上面谈到了后两者。 model 只是您世界特定角落的 JavaScript 表示，例如，在本例中为 Contact。

因此，综合以上内容，我们可能（就目录结构而言）：

models\contact.js
views\contact.html
viewmodels\contact.js

您可以在视图模型中实例化模型，然后使用 Knockout 将视图绑定到视图模型。

MVVM 只是提供了一种很好的方法来分离关注点并最大限度地重用。作为重用的示例，您可以将联系人视图绑定到许多不同的联系人视图模型，具体取决于上下文。上下文可能是客户端设备的大小、用户的授权配置文件、“社区”与“高级”版本的应用程序，等等。

通过改进来修改 MVVM 的任何组件都可以相对隔离地完成，而不会对整个应用程序产生不利影响。因此分离关注点的价值。

这有意义吗？

【讨论】：

谢谢！这说明了很多事情。但我也希望看到一个之前/之后的代码，它可以帮助我更好地理解 Knockout 是如何完成你提到的（代码重用、单独的逻辑等）的。再次感谢。
@Shobit 是的，这会涉及很多，这可能就是您的问题被搁置的原因。我可以用文字告诉你：如果没有 Knockout（至少在 ES6 到来之前），就不会有优雅的方式将视图绑定到视图模型。您必须使用 JavaScript 在视图模型本身中编写所有绑定、访问 DOM 元素、附加侦听器等。换句话说，您将失去声明式的威力。在淘汰赛的情况下，你会输掉data-bind。