什么是MVVM,我们应该使用它吗?

时间:2011-10-29 02:45:41

标签: javascript mvvm design-patterns knockout.js

我一直在关注MVVM模式,特别是knockoutjs,而且大多只是让我感到畏缩。关于保持结构,演示和显示分开的好处,我不会长期咆哮,我只想问(作为一个例子):

之间有什么区别?
<button data-bind="click: someJavaScriptFunction">Something</button>

<button onclick="someJavaScriptFunction();">Something</button>

我们应该在标记中加入如此多的行为控制吗?尽管这很简洁,但它似乎违背了我听过的每一个网络编程原则。

我错了吗?

2 个答案:

答案 0 :(得分:13)

以下是您问题的直接答案。

在第二个示例中,您指的是必须位于全局范围内的函数(即window对象的属性)。

在第一个示例中,您指的是当前视图模型的属性。

是的,这是一个微妙的区别,但它是一个重要的区别。如果使用事件属性,则只能引用全局范围中存在的事物。这意味着您必须在全局范围内放置要访问的所有内容,这会导致代码非常混乱。

如果使用声明性绑定,则绑定的确切含义取决于上下文。

将HTML标记视为更加巧合是有帮助的。您真正关注的是对视图模型的结构化访问。将withforEach视为嵌套上下文,将其他绑定视为其属性。声明性绑定和底层HTML之间的关系突然感觉更像是使用XSLT。

两个示例看起来非常相似。但是潜在的概念是截然不同的,它们使得数据绑定如此强大,以及事件属性如此令人讨厌。

事件属性不赞成的原因不仅仅是它们将逻辑与结构混合在一起。这是他们将任意JavaScript代码绑定到HTML元素的弱尝试,这阻止了应用程序逻辑的正确封装。事件属性是低级“钩子”,绑定扩展了元素的行为。

所有这一切,很可能通过使用声明性绑定来做与人们对事件属性所做的相同的可怕事情。不同之处在于你可以用它们做些什么。你不应该总是通过如何滥用技术来判断技术 - 我们都是成年人。

答案 1 :(得分:7)

你只使用MVVM的一部分 - 特别是View - 在你上面给出的代码示例中。使用Knockout(或任何其他MVVM库)的原因是可以轻松地将视图绑定到模型 - 视图模型 - 从而允许您停止编写大量样板代码,只是为了从视图中返回值。

我看到很多不稳定的javascript / jquery代码,人们去使用这样的东西:

var ex = {
   some1: $('#textbox1').val(),
   some2: $('#textbox2').val()
};

问题在于它在整个Web应用程序中乱七八糟,维护变得非常繁琐。我知道使用Knockout,每当我的View更新时,我的视图模型也会更新。

每个应用程序都不需要它,你不应该只使用它,因为它的使用“很酷”。显然需要有理由使用它,我上面的例子是一个原因,我确信还有更多。