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

Question

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

button火是否应该是控制器必须听的事件？或者,如果button直接调用控制器功能？或者控制器应该将事件分配给视图？

感谢您的任何意见!

Answer 1

我会说View应该捕获按钮触发的事件并触发它将由控制器处理的事件.

让我解释:

@raynos写道:

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

即使我同意第一个声明,我也不喜欢这种解释.

遵循此语句意味着控制器必须知道UI中的每个按钮/文本字段/元素及其ID /选择器.

我更喜欢使用View fire语义事件,例如"languageSelected"或"searchRequested",并将相关数据添加到事件中.

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

如果您现在选择更改应用程序的设计以显示搜索词链接而不是搜索框和按钮(或者即使您已经并排 - 或在不同的屏幕上),您唯一需要更改的是视图.

技术方面的注释:如果使用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);
    ...
}

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