Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #86 from pindia/feature-multicontroller

Multi-event controller binding
  • Loading branch information...
commit 55e4336c750e7f5e349c74eef1b41ae68c4c1b99 2 parents 16a5df3 + d7ab929
@arturadib authored
View
21 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');
View
6 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)
View
4 docs/docs.html
@@ -321,7 +321,9 @@
<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>
View
36 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'};
Please sign in to comment.
Something went wrong with that request. Please try again.