If I'm following a rough MVC pattern in JavaScript, what is the best way for the view (such as a button element) to notify the controller?

Should the button fire an event that the controller has to listen to? Or, should the button call a controller function directly? Or maybe the controller should assign the event to the view?

Thanks for any input!

If I'm following a rough MVC pattern in JavaScript, what is the best way for the view (such as a button element) to notify the controller?

Should the button fire an event that the controller has to listen to? Or, should the button call a controller function directly? Or maybe the controller should assign the event to the view?

Thanks for any input!

• javascript
• model-view-controller
• controller
• view

• Controllers listen on input. This means controllers listen on events from DOM nodes. – Raynos Commented Jan 4, 2012 at 1:19
• @Raynos: do you mean that the view assigns the dom element an onclick, and inside that onclick it fires an event that the controller has to subscribe to? thanks! – tau Commented Jan 4, 2012 at 1:22
• 2 No, the view has no business talking to the controller. The controller gets a handle on the dom node somehow and attaches the handler itself. – Raynos Commented Jan 4, 2012 at 1:25
• @Raynos great! thanks for the explanation. if you posted this as an answer i would accept it. – tau Commented Jan 4, 2012 at 1:28

3 Answers 3

I would say that the View should catch the event fired by the button and fire its own event that will be handled by the controller.

Let me explain:

@raynos wrote:

Controllers listen on input. This means controllers listen on events from DOM nodes

personally even though I agree with the first statement I don't like the interpretation.

To follow this statement means that the controller has to know of every button/text field/element in the UI and its ID/Selector.

I prefer to have the View fire semantic events such as "languageSelected" or "searchRequested" and add the relevant data to the event.

so a typical flow would be that the View renders some UI (lets say it has a search box and a button), when the user clicks the button - the View handles the event and fires its own "searchRequested" event. This event is handled by the Controller that would call the Model asking it to perform the search. when done, the Model will fire a "searchResultsUpdated" evnet which will be handled by the View causing it to show the results.

if you now choose to change the design of your app to show search term links instead of a search box and a button (or even if you have then side by side - or on different screens) the only thing you need to change is the View.

A technical side-note: If using JQuery and assuming your view is a javascript object you can use

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

to fire the event

And

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

to listen for and handle the event.

Interesting question. I think it would depend quite a lot on your situation, the complexity of your example, and the particular JavaScript patterns that you're using.

If the button you're talking about is simply an HTML element, this might be a simple way:

var MyController = function() {

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

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

Or, if your button is an object or module that you've created, you could set a callback:

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);
    ...
}

Unfortunately, trivial examples don't really illustrate the benefits of different approaches!

There are many ways to do it. Here is one way.

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;
}