JavaScript MVC: how do views notify the controller

Question

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!

Answer 1

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.

Answer 2

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!