MVC + Events in JavaScript

Question

I'm a bit lost with implementing MCV pattern on javascript.

Where should events (such as 'click','change') come in on MVC in javascript?

I have this event function,

   var EventExample = function (controller, view) {

       this.controller = controller;
       this.view = view;
       return this;
   };

   EventExample.prototype.clicked = function ( ) {

        var $root = this;

        var id = $("#input-text").val();

        $root.controller.find( id );

        return $root.view.render();
   };

And I have this function to bind all MVC, Mapper, Service, etc together,

   function bootstrapper() {

        // get a new model.
        var model = new ModelExample();

        // get a new model.
        var mapper = new MapperExample();

        // get a new service.
        var service = new ServiceExample( mapper, model);

        // get a new controller.
        var controller = new ControllerExample(service);

        // get a new view.
        var view = new ViewExample(model);

        // get a new event.
        var event = new EventExample(controller, view);

        $('#search-button').click(function(){
            event.clicked();
        });
   }

That is how I call the event function in there, but it seems weird.

I looked at this blog, the event (click) seems must be wrapped inside a function? if so, is it supposed to be in a controller, or in a model, or in a mapper?

Are all events considered Observers in the design patterns?

Any ideas how I should go with events?

My entire MVC code is on jsfiffle

Answer 1

Nowhere. Events have nothing to do with MVC.

Patterns are best practices for a specific solution

First of, read my rant on MVC: http://www.sitepoint.com/mvc-problem-solution/

MVC is a pattern that helps us in seperating our display, domain logic and data representation. Thats it. Nothing more.

It doesn't say anything about events or observers. Neither does it help us save the world.

MVC comunication

MVC states that a Controler updates a model, The Model updates the view and the view triggers the Controller.

It does however not say how this should happen. Should the Model be passed a view that it then updates. Maybe, maybe not. MVC doesn't care.

Because we are using JavaScript, we have however a very strong tool to solve this communication between the Model, view and controller; The event system.

Our Model-View communication could look like this:

model.on('update', function(updatedData) {
    view.update(updatedData);
});

This is called the Observer pattern. The anonymous function is the observer that observers the model. Here, the model notifies all registered observers of a change.

Or you could go for an event notifier. where you add notifiers and listeners:

controler.prototype.changeModelName = function() {
    myEventService.notify('model.update', {'data':{'name':'myNewName'}});
};
myEventService.listenTo('model.update', function(event){
    model.update(event.data);
}); 
myEventService.listenTo('model.update', function(event){
    view.update(event.data);
});

Or some other approach. MVC doesn't care.