Model View ViewModel/Knockout 解决了什么问题? [英] What does Model View ViewModel / Knockout solve?

问题描述

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

I was reading someone's code where I came across Knockout and MVVM. I did some reading on both topics, but I'm still confused as to what problems they really solve, most likely because I just haven't built applications large enough to come across the problems that this framework/architecture solves.

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

I spent some time to understand this sample code -- http://knockoutjs.com/img/homepage-example.png -- from the Knockout home page. I was hoping if someone could explain to me what the same code would look like if Knockout were not used, and how that could be problematic.

(SO 可能不是解决这个问题的合适平台，所以请告诉我是否有其他更合适的 Exchange).

(SO may not be the right platform for this question, so please let me know if there's some other Exchange that's more appropriate).

谢谢！

推荐答案

从 10,000 英尺

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

Knockout provides two-way data-binding between a view written in HTML and corresponding properties and functions on a viewmodel written in JavaScript.

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

Imagine you have an HTML view called contacts.html and a JavaScript viewmodel called contacts.js. Those two together would make a module, and Knockout would be the glue that binds them together.

MVVM 代表模型视图视图模型.我在上面谈到了后两个.模型只是您世界中某个特定角落的 JavaScript 表示，例如，在本例中，是联系人.

MVVM stands for Model View ViewModel. I addressed the latter two above. The model is simply a JavaScript representation of a particular corner of your world, say, in this case, a Contact.

综上所述，我们可能有(就目录结构而言):

So, bringing together the above, we might have (in terms of directory structure):

• 模型contact.js
• 视图contact.html
• viewmodelscontact.js

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

You might instantiate your model inside your viewmodel, and then bind your view to the viewmodel using Knockout.

MVVM 只是提供了一种分离关注点和最大化重用的好方法.作为重用的示例，您可以根据上下文将您的联系人视图绑定到许多不同的联系人视图模型.上下文可以是客户端设备的大小、用户的授权配置文件、应用程序的社区"与高级"版本等.

MVVM simply provides for a great way to separate concerns and maximize reuse. As an example of reuse, you could bind your contacts view to many different contact viewmodels, depending on context. The context could be the size of the client device, a user's authorization profile, a "community" versus a "premium" version of your application, and so on.

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

Modifying by improvement any of the components of MVVM can be done in relative isolation without adversely affecting the application as whole. Hence the value of separating concerns.

有意义吗?

这篇关于Model View ViewModel/Knockout 解决了什么问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！