MVP pattern with Javascript framework?

Question

The main goal with MVP is decoupling of different aspects in the code. Normally, in JavaScript, there are 3 major such aspects:

1. Event Handling
2. DOM manipulation
3. Server communication (AJAX calls)

For each of these concerns, there's a corresponding term from MVP:

1. EventHandling = Presenter
2. DOM Manipulation = View
3. AJAX calls = Model

Since indeed it is not always simple to implement the 3 aspects, an EVENT BUS may come in handy. This bus should be a singleton and all the events, raised in various context should be published on the bus. The Presenter needs to register to its events and react accordingly when events happen.

Here is how it would work:

First thing that happens is the page load. Listen to this using the normal event model or jQuery or whatever is convenient. Create the Model, the View and the Presenter. The Presenter needs to hold the View and Model instances since he's gonna use them.

var model = new Model();
var view = new View();
var presenter = new Presenter(model, view);

Remember that Presenter is the event handler so the bus should know about it and route events to it for handling:

bus.registerHandler(presenter);

The first event is the "init", which means the page has loaded and the MVP objects are all set:

bus.init(); // call this yourself

This would trigger something in the Presenter, like a function. I prefer the on... naming convention, in this example presenter.onInit(). This gives a chance to install UI listeners:

// in the Presenter
onInit: function() {
  view.addSubmitListener();
  view.addWhateverListener();
  ...
}

// in the View (using jQuery)
addSubmitListener: function() {
  $("#submitButton").click(function() {
    var formData = ...
    bus.submit(formData); // publish an event to the bus
  });
}

When the Submit button is clicked the bus.submit(formData) is called and this will route it to the handler -- presenter.onSubmit(formData):

// in the Presenter
onSubmit: function(formData) {
  model.postForm(formData, function(data) {
    // handle the response
    view.updateSomething(data);
  });
}

And so on... The entire trick is binding the bus to the presenter and then you're in the loop.

HTH

Take a look at knockout.js which is a MVVM framework for your web pages. It provides a really beautiful and easily extensible framework for linking a model and a view in a loosely coupled fashion.

Check out angular project at http://angularjs.org/ and feel free to ask any question at mailing group.

It's designed to work well together with jQuery. Very useful for writing TESTABLE MVC JS applications.

I know this question is old, but I think it is worth mention here. My vote goes to Backbone.js. Even docs says it is MVC, I would say it is MVP.

• VIEW = html template (jQuery.template)
• MODEL = Backbone.Model
• PRESENTER = Backbone.View ( layer between your view-tempate and how to bound data to it, and more thins you can do) and what is best you can use in render method couple views (html templates) or switch which to use...

and what is best you still have controller

• CONTROLLER = Backbone.Controller

Alternative could be as @JoshRivers mentioned, knockoutJS but my personal opinion is that view template is overwhelmed with binding stuff.

And last note. Thing is View as V from either MVC or MVP is something which can be built from your template without coding it, make good HTML template parser and you are good to go :) Believe me, convention is your friend.