Document Controllers  page     

Document Controllers delegate on the documentElement. You don't have to attach an instance as this will be done for you when the controller class is created. Document Controllers, with the exception of MainControllers, add an implicit '#CONTROLLERNAME' before every selector.

To create a document controller, you just have to set the controller's static onDocument property to true.

$.Controller.extend('TodosController',
{onDocument: true},
{
  ".todo mouseover" : function( el, ev ) { //matches #todos .todo
      el.css("backgroundColor","red")
  },
  ".todo mouseout" : function( el, ev ) { //matches #todos .todo
      el.css("backgroundColor","")
  },
  ".create click" : function() {        //matches #todos .create
      this.find("ol").append("<li class='todo'>New Todo</li>"); 
  }
})

DocumentControllers should be used sparingly. They are not very reusable. They should only be used for glueing together other controllers and page layout.

Often, a Document Controller's "ready" event will be used to create necessary Element Controllers.

$.Controller.extend('SidebarController',
{onDocument: true},
{
  ready : function() {
      $(".slider").slider()
  },
  "a.tag click" : function() {..}
})

MainControllers

MainControllers are documentControllers that do not add '#CONTROLLERNAME' before every selector. This controller should only be used for page wide functionality and setup.

$.Controller.extend("MainController",{
  hasActiveElement : document.activeElement || false
},{
  focus : funtion(el){
     if(!this.Class.hasActiveElement)
         document.activeElement = el[0] //tracks active element
  }
})