Knockout JS - MVVM 模式，我的 ui 逻辑在哪里？答案

【问题标题】：Knockout JS - MVVM pattern, where does my ui logic go?Knockout JS - MVVM 模式，我的 ui 逻辑在哪里？
【发布时间】：2011-09-24 07:40:31
【问题描述】：

这听起来像是一个愚蠢的问题，但我想我还是会发布......

我只是用 javascript 和 html 制作一个简单的 web 应用程序，并决定使用 Knockout JS 作为主要框架来管理 UI。但是我有点困惑如何进行。

我的第一个页面是一个非常简单的登录页面，它只有一个用户名和密码框，当我想对 UI 进行操作时，问题就出现了。一个例子是向 ui 框添加水印，或添加有关监听自定义事件的逻辑，我可以将其编写为内联 javascript，但我无法真正对其进行单元测试。

最初我打算使用 MVC 样式模式，这样我就可以使用模拟视图对控制器进行单元测试，然后将任何 ui 逻辑放入其中。

那么有没有什么可以接受的方法来做到这一点而不将其全部作为页面内逻辑？

【问题讨论】：

标签： javascript mvvm knockout.js

【解决方案1】：

mvvm 的工作方式是视图应该是该视图模型的可视化表示，因此将您的逻辑放在那里。如果您设计正确，以便您的功能包含在单独的类中，那么您可以轻松地将它们全部模拟出来。如果您习惯于 MVC，那么只需将视图模型视为您的控制器。

不过，我可以看到您的问题所在，因为对于复杂的视图，您最终可能会在 ViewModel 类中发生很多事情，但是如果您只坚持简单的 oo 和封装原则，您就不会错得太远...

所以无论如何总结一下，把它放在你的视图模型中的逻辑中。

【讨论】：

【解决方案2】：

您可以使用两种方法。有一个xUnit package for JavaScript called JsUnit，因此可以对基于 JavaScript 的 UI 逻辑进行单元测试。您提到的另一条路线是使用控制器来包含逻辑和 JavaScript 作为“纯”视图模型。我个人觉得这两种方法都是可行的。您只想确保基于 JavaScript 的视图模型不会与视图过于亲密。 :)

【讨论】：

我目前正在使用 JsTestDriver 来测试我的东西，但是这一切都需要封装在类中以使测试变得有价值，并且从最初看看其他人是如何完成这类事情的，它只是散布在整个模型中的随机代码......我更喜欢你提到的后一种方法，但我希望更多的人在制作他们的网站时会遇到这些问题，在互联网上找不到太多关于它的信息......