Merge pull request #86 from pindia/feature-multicontroller

Multi-event controller binding

agility.js

@@ -911,12 +911,23 @@
     object.view.render();
 
     // Bind all controllers to their events
-    for (var ev in object.controller) {
-      if (typeof object.controller[ev] === 'function') {
-        object.bind(ev, object.controller[ev]);
+
+    var bindEvent = function(ev, handler){
+      if (typeof handler === 'function') {
+        object.bind(ev, handler);
       }
-    }  
-
+    };
+
+    for (var eventStr in object.controller) {
+      var events = eventStr.split(';');
+      var handler = object.controller[eventStr];
+      $.each(events, function(i, ev){
+        ev = ev.trim();
+        bindEvent(ev, handler);
+      });
+    }
+
+
     // Auto-triggers create event
     object.trigger('create');    
 

docs/_docs.md

@@ -241,7 +241,11 @@ If your `format` and/or `style` are too large, it's probably time to split your
 
 ## [Events](#events)
 
-There are two types of events in Agility: DOM events, and Agility events, and both are implicitly bound to controller functions by matching function and event names. User-defined controllers extend (i.e. are called in addition to) built-in controllers.
+There are two types of events in Agility: DOM events and Agility events. Both are implicitly bound to controller functions by matching function and event names.
+
+Controller functions can bind to multiple events at the same time by separating the events with a semicolon. For example, a controller function named `click #a; click #b` would fire when either click event occurred.
+
+User-defined controllers extend (i.e. are called in addition to) built-in controllers.
 
 ### [DOM events](#events-dom)
 

docs/docs.html

@@ -321,7 +321,9 @@ <h2><a href="#format-style">Format and style</a></h2>
 <p><div class="demo"></div></p>
 <p>If your <code>format</code> and/or <code>style</code> are too large, it's probably time to split your object into more Agility objects. (Unless of course you are creating a mostly static page, in which case Agility is probably not the best solution).</p>
 <h2><a href="#events">Events</a></h2>
-<p>There are two types of events in Agility: DOM events, and Agility events, and both are implicitly bound to controller functions by matching function and event names. User-defined controllers extend (i.e. are called in addition to) built-in controllers.</p>
+<p>There are two types of events in Agility: DOM events and Agility events. Both are implicitly bound to controller functions by matching function and event names.</p>
+<p>Controller functions can bind to multiple events at the same time by separating the events with a semicolon. For example, a controller function named <code>click #a; click #b</code> would fire when either click event occurred.</p>
+<p>User-defined controllers extend (i.e. are called in addition to) built-in controllers.</p>
 <h3><a href="#events-dom">DOM events</a></h3>
 <p>Usual DOM events such as <code>click</code>, <code>dblclick</code>, <code>mouseenter</code>, etc are supported through jQuery's event API. Please consult jQuery's API for a <a href="http://api.jquery.com/bind/">list of events</a> supported. </p>
 <p>When binding to controller functions, DOM events are distinguished from Agility events by the presence of a <a href="http://api.jquery.com/category/selectors/">jQuery selector</a> using the syntax:</p>

test/public/core.js

@@ -675,7 +675,41 @@
     fourth.model.set({label: "newLabel"});
     equals(fourth.view.$('span').first().text(), 'newLabel', 'naked ~change:label collapsed correctly to "change:label"');
   });
-
+
+
+  test("Multiple event controller binding", function(){
+    var numCalls = 0;
+    var obj1 = $$({
+      controller:{
+        'event1;event2;  event3': function(){
+          numCalls += 1;
+        }
+      }
+    });
+    obj1.trigger('event1');
+    obj1.trigger('event2');
+    obj1.trigger('event3');
+    equals( numCalls, 3, 'all three events ran controller code');
+
+    var obj2 = $$({
+      view:{
+        format: '<div id="main"><div id="button1" /><div id="button2"/><div class="button3" /></div>'
+      },
+      controller:{
+        'click #button1:not(.disabled), div#button2; dblclick div#main .button3; mouseover &': function(){
+          numCalls += 1;
+        }
+      }
+    });
+    obj2.view.$('#button1').click();
+    obj2.view.$('#button2').click();
+    obj2.view.$('.button3').dblclick();
+    obj2.view.$().mouseover();
+
+    equals( numCalls, 7, 'all four events ran controller code');
+
+  });
+
   test("Object inheritance", function(){
     var objBase = $$({}, {format:'<div><span data-bind="first"/>.<span data-bind="last"/></div>', style:'& {float:right; display:none;}'});
     var objNewModel = {first:'Joe', last:'Doe'};