AngularJS 中的模型视图 ViewModel

Shi*_*han 5 mvvm angularjs

我目前正在阅读Manning 的 Lukas Ruebbelke 所著的《AngularJS in Action》 \n在第一章中,他提出,

\n\n
\n

控制器负责为视图提供要绑定的状态以及视图可以发回控制器以执行工作单元的命令。这使视图不必维护状态(因为它只需要显示控制器所处的任何状态),并且使视图不必执行任何工作(因为视图始终遵循控制器)。

\n
\n\n

在此输入图像描述

\n\n

他为 视图提供绑定状态是什么意思?

\n\n

此外,他建议,

\n\n
\n

使用 ViewModel 会反转 jQuery 风格应用程序中传统上存在的应用程序流程。在 jQuery 中,\xe2\x80\x99ve 查询 DOM 并附加一个事件侦听器。\n 当该事件触发时,你将尝试解释该事件并解析 DOM\n 的状态,以便可以执行一些命令式操作。这迫使 HTML 和驱动它的 JavaScript 之间紧密耦合。通过引入 ViewModel,您\n\xe2\x80\x99 能够打破这种关系。控制器不再负责侦听视图,而是视图负责向其操作的控制器发出特定命令。

\n
\n\n

最后一行让我困惑。

\n\n

控制器不再负责监听视图 \n而是视图负责向控制器发出特定命令操作的

\n\n

不是说儿子不再负责听父亲的话,而是父亲负责向儿子发出必须操作的具体命令。

\n\n

即使儿子不负责,实际上也是让儿子负责。但上面的说法不是很相似吗?

\n\n

他到底想说什么?

\n

Mar*_*rix 0

考虑这些例子。这是 jQuerystyle 应用程序:

jQuery('element').on('click', clickHandler);
Run Code Online (Sandbox Code Playgroud)

控制器从视图中抓取一个元素并绑定到它。

这是一个 Angular 示例,其中关系是相反的。现在控制器公开了一个处理程序并且视图绑定到它。

function Controller() {
    this.clickHandler = function(){};
}
Run Code Online (Sandbox Code Playgroud)
<button type="button" click="vm.clickHandler()">
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!