JavaScriptMVC Controller Overview

From JavaScriptMVC

Controller is an event delegation library that helps logically organize your event handlers.

Controller makes your applications:

• Easier to read
• Faster to write
• Easier for others to understand

StatefulController Overview

Clearly understand your code's purpose

With controller, one look at your code and you'll know its purpose without ambiguity.

Naming Conventions

By naming a controller, you describe which part of the page its event handlers operate on. For example, the todos controller operates on elements with id "todos" and class "todo".

<ol id="todos">
  <li class="todo">Laundry</li>
  <li class="todo">Dishes</li>
  <li class="todo">Walk Dog</li>
</ol>

TodosController = Controller.extend("todos",{
  // the onclick event handler
  click: function(){
    alert("clicked todo");
  }
});

Function names describe the events they respond to. For example, to create an onclick handler, name it "click".

Deterministic Code

Controllers group event handlers that operate on a specific part of the page. When you click an element with class "todo", you'll know exactly where to find its event handler.

Don't repeat yourself

Never reattach your event handlers, even if the HTML is modified! This makes writing AJAX applications that modify the page much easier.

Conventional event attachment requires you to reattach event handlers to new page elements. Instead, Controller creates permanent event attachment rules so you never have to write event attachment code. This is achieved using event delegation.

$E('todos').innerHTML += "<li class='todo'>"
  + "Laundry</li>";

Highlights

Match elements with CSS selectors

Name your event handlers with CSS selectors to assign the handler to matching elements.

// attach to ul elements with class "foo"
"ul.foo click": function(params){
  params.element.style.class = 'clicked';
}

Simple AJAX callbacks

Controller provides a simple, clean syntax for AJAX callbacks.

}, click: function(){
   new Ajax.Request('url', {onComplete: 
      this.continue_to('deleted')});
}, deleted: function(){
   alert('item deleted');

Form helpers

Simplify client side form validation with a helper that gathers form data.

// grab the contents of the form
var form_data = params.form_params();

Support for all common events

Controller attaches all the most commonly used events.

change, click, contextmenu, dblclick, 
mousedown, mousemove, mouseout, mouseover, 
mouseup, reset, resize, select, submit, 
dblclick, focus, blur, load, unload, 
keypress

Events fire in correct order

Events fire in the correct DOM order from the deepest elements up to the body element, the same order you'd expect if you were listening in the bubble phase.

Nested elements behave

If you put a click handler on a div element with a paragraph element inside of it, then click the paragraph element, the click handler is called, with the div element passed as the target element. This test fails in other event delegation libraries.

Controller API

Controller Demo