javascript - 在MVC中防止循环事件的优雅方法？

Question

问题简而言之:

在MVC中，您如何区分复选框单击(或选择框或列表框更改)与人为“ Controller ，修改模型”的意思，以及 Controller 的复选框单击(或选择框或列表框更改)，意思是“我”我因为模型已经改变而更新 View ”？

示例:

我有一个 JS 应用程序(都是一个大的 HTML+JS 页面；它背后有一个服务器，AJAX 正在运行，但这对示例来说并不重要)它具有由“边缘”连接的“顶点”概念。 UI 允许您在 map 上添加和删除顶点，以及启用或禁用顶点对之间的边。

有两种方法可以禁用从顶点 A 到顶点 B 的边:

单击边缘使“边缘详细信息”窗口为您提供“禁用此边缘”按钮；或

单击顶点 A(或 B)以使“顶点详细信息”窗口为您提供附近顶点的 list ，您可以从中取消选中顶点 B(或 A)。

以下是 MVC 中它的工作原理(但请参阅本文末尾的更新，我在其中纠正了我理解的问题):

模型:一个 Vertex 对象列表和一个 Edge 对象列表。

View :一个 GMaps UI，带有标记和折线，以及复选框和按钮以及“顶点详细信息”和“边缘详细信息”DIV。

Controller :

当复选框和按钮上的事件触发时更新模型的 JS 函数；和

当模型上的事件触发时更新 View 的 JS 函数。

这是具体的不雅 :

用户拥有专注于顶点 A 的顶点详细信息窗口，以及专注于从顶点 A 到顶点 B 的边的边详细信息窗口。

用户单击“边缘详细信息”窗口中的“禁用此边缘”。

Controller 函数 1 获取点击事件，并在 Edge 模型对象上调用 disable()。

Edge 模型对象触发“我刚被禁用”事件。

Controller 功能 2 收到“我刚被禁用”事件，并且

重新绘制边缘详细信息窗口以说“我被禁用了!”和

在顶点详细信息窗口中取消选中顶点 B。

废话! 这将再次触发 Controller 功能 1，该功能正在监听表示禁用边缘的 UI 事件!

所以有不必要的模型重新更新和 View 的重新更新。在包含触发事件的事件的更复杂 View 中，这可能会导致数十个无关的更新!

更新:一个很好的答案。

我有点误解了 MVC。我不只有一个 View ，正如我上面描述的:我有几个 View 到几个模型中。特别是，我有一个特定节点的边的复选框 ListView ，以及一个单独的“详细窗口样式”边 View 。

此外，我不应该让一个 Controller 函数在模型更改时更新所有 View :当模型更改时，每个 View 都应该修改自身。

因此，如果每个 View 在模型上注册“状态更新”事件，并且每个 View 在接收到这些事件后更新自身，那么我的循环事件问题的答案就是:

复选框 ListView 将在模型状态更改后更新复选框时禁用复选框事件。

现在，如果用户通过 Edge Detail 窗口禁用 Edge，Controller 会更新 Edge 模型，复选框 ListView 会收到更新通知，并且复选框 ListView 足够智能，可以在更改状态时使复选框事件静音适当的复选框。

这比我原来的解决方案更可口，其中一个 Controller 更新所有 View ——因此必须知道哪些 View 需要特别注意和馈送以避免循环。相反，只有带有麻烦的 UI 元素的单个 View 必须处理这个问题。

感谢回答我问题的人!

Answer 1

只是回顾一下 MVC 模型。 View 通常应该自行更新。这是它的工作原理: Controller 更改模型的状态，模型向其 View 发送更新， View 从模型中获取新状态并更新自身。虽然 Controller 和 View 通常是捆绑在一起的(即在图形表示中深入研究数据)，但它们永远不应该直接交互，只能通过模型​​进行交互。这当然是一般的。

所以更新 View 的 JS 函数实际上并不是 Controller ，这是一个重要的区别。它们应该被视为您观点的一部分。这可能对手头的问题没有帮助，但我认为值得指出。

你也不能删除你的模型，我假设你的意思是你从你的模型中删除了一些东西，因为如果没有模型支持，没有 View 或 Controller 实际上可以存在(或处于功能状态)。

不是 JS 代码骑手，也没有使用 gmaps 我真的不明白问题出在哪里。更改复选框(选中属性)的状态会触发 onClick() 事件吗？它真的不应该恕我直言，但也许他们以这种方式实现了它，否则您可以将 Controller 附加到 onClick() 并向复选框添加一些逻辑(或者，这是 JS，在某个函数中)以更改复选框状态.如果这是不可能的，选项 1 和 2 绝对是您最好的选择。

另外:用户与 View 交互

那么当用户想要与 View 交互时会发生什么？通常，小部件将同时包含 View 和 Controller 。复选框有一个 View (您可以查看它是否被选中)和一个 Controller (您可以单击它)。当您单击复选框时，原则上应发生以下情况:

复选框 Controller 接收事件

复选框 Controller 更改此复选框在模型中表示的值的状态

模型更新监听器(包括复选框)

复选框更新其外观以反射(reflect)该值已更改

第一步， Controller 如何接收事件在某种程度上取决于语言，但在 OOP 语言中，它可能是附加到此特定小部件上的用户界面事件的监听器对象，该小部件要么是 Controller ，要么将用户交互通知给 Controller 。