JavaScript MVC：视图如何通知控制器

Question

如果我在 JavaScript 中遵循粗略的 MVC 模式，那么视图（例如 button 元素）通知控制器的最佳方式是什么？

按钮是否应该触发控制器必须监听的事件？或者，按钮应该直接调用控制器函数吗？或者也许控制器应该将事件分配给视图？

感谢您的任何意见！

Answer 1

我想说的是，视图应该捕获按钮触发的事件，并触发其自己的事件，该事件将由控制器处理。

让我解释一下：

@raynos 写道：

控制器监听输入。这意味着控制器监听事件
来自 DOM 节点

尽管我同意第一个陈述，但我个人不喜欢这种解释

遵循此声明意味着控制器必须了解 UI 中的每个按钮/文本字段/元素及其 ID/选择器。

我更喜欢让 View 触发语义事件，例如“languageSelected”或“searchRequested”，并将相关数据添加到事件中。

因此，典型的流程是视图呈现一些 UI（假设它有一个搜索框和一个按钮），当用户单击按钮时 - View 处理该事件并触发其自己的“searchRequested” “ 事件。此事件由控制器处理，该控制器将调用模型要求其执行搜索。完成后，模型将触发“searchResultsUpdated”evnet，该事件将由视图处理，使其显示结果。

如果您现在选择更改应用程序的设计以显示搜索词链接而不是搜索框和按钮（或者即使您并排 - 或在不同的屏幕上），您唯一需要更改的是 <强>查看。

技术旁注：
如果使用 JQuery 并假设您的视图是一个 javascript 对象，您可以使用它

$(view).triggerHandler( 
   $.Event('eventName',{'object:'with','more':'event','related':'data'})  
);

来触发事件

并

$(view).on('eventName',handler); 

侦听和处理事件。

Answer 2

有趣的问题。我认为这在很大程度上取决于您的情况、示例的复杂性以及您正在使用的特定 JavaScript 模式。

如果您正在谈论的按钮只是一个 HTML 元素，这可能是一个简单的方法：

var MyController = function() {

    this.particularMethod = function() { 
        // update model
    }

    // Using jquery
    var button = $("#myButton");
    button.click( function() { myController.particularMethod() } )
}

或者，如果您的 button 是您创建的对象或模块，您可以设置回调：

var Button = function(selector, clickFunction) {
    // Using jquery
    $(selector).click(clickFunction)
    ...
}

var MyController = function() {

    this.particularMethod = function() { 
        // update model
    }

    var button = new Button("#myButton", this.particularMethod);
    ...
}

不幸的是，简单的例子并不能真正说明不同方法的好处！

Answer 3

有很多方法可以做到这一点。这是一种方法。

var app = new App();

function App() {
  var model = new Model();
  var view = new View();
  var controller = new Controller(view, model);
}

function Controller(view, model) {
  view.addActionListener(function() {
    alert("on activate");
  });
}

function View() {
  var self = this;
  $("button").onclick = function() {
    self.listener();
  }
}

View.prototype.addActionListener = function(listener) {
  this.listener = listener;
}