From e0e65bc70adfa0986f6e33aad89d9d48b62ec6a7 Mon Sep 17 00:00:00 2001 From: jamiemlaw Date: Fri, 6 Dec 2013 16:12:04 +0000 Subject: [PATCH 1/2] Added __bindEvents function for autogenerate event bindings on Ply Views Now, when defining a new Ply view, the user can define an `__events` objects on the prototype, that takes as its keys an event name and the object id, separated by a space, e.g. `'click closeBtn'` would be used to attach a click handler to `this.objects.closeBtn`. As its values, it takes the name of the function to execute, e.g. `'close'` to run `this.close`. The callback function takes two arguments: the first is the event object, and the second is a shortcut to the element that triggered the event. Within the function, `this` refers to the Ply object, not the element, like in previous versions of Ply. This removes the need to use `self`, and allows for referencing other methods. --- src/ui.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/src/ui.js b/src/ui.js index 8b978f5..b09db81 100644 --- a/src/ui.js +++ b/src/ui.js @@ -140,6 +140,51 @@ Ply.ui = (function ($) { }, + // Declare method for binding events. Method is created for same purposes + // as `this.__bindElements`, `this.__bindPartials` and `this.__bindNotifications. + // An example key from `this.__events` could be 'click closeButton' + // which would refer to the click event for `this.objects.closeButton` + // an example value could be 'close', which would refer to the function `this.close` + __bindEvents: function () { + + var keys, + elem, + handler; + + // #### Events + + // If `this.__events` is defined, autogenerate the events. + if (this.__events) { + + // Iterate over the own properties of `this.__events`. + for (var id in this.__events) { + if (this.__events.hasOwnProperty(id)) { + + // Split the id into the handler and the element(s) + keys = id.split(' '); + // and asign them accordingly + handler = keys[0]; + elem = keys[1]; + + // If that element exists + if (this.elements[elem] && this.elements[elem].length) { + // Attach the event to it + this.elements[elem].on(handler, (function (callback, self) { + return function (e) { + // Within the callback, `this` refers to the Ply view, + // not the element the event is attached to, + // so we will pass that element in as a second argument + // for easy access + self[callback](e, e.target); + }; + }(this.__events[id], this))); + } + } + } + } + + }, + // Declare method to destroy view. `this.__destroyView` is automatically called when view element is // removed from the DOM. __destroyView: function () { @@ -205,6 +250,8 @@ Ply.ui = (function ($) { } } + // Events aren't stored anywhere other than on the nodes they're bound to, so these will be removed by $.cleanData + }, // See getOptionOrData @@ -275,6 +322,9 @@ Ply.ui = (function ($) { // Invoke `this.__bindElements`. this.__bindElements(); + // Invoke `this.__bindEvents`. + this.__bindEvents(); + // Invoke `this.__bindPartials`. this.__bindPartials(); @@ -496,4 +546,4 @@ Ply.ui = (function ($) { // Alias `jQuery` to `$` in the module's scope. })(jQuery); -// ↪ [Config](config.html) \ No newline at end of file +// ↪ [Config](config.html) From 809c29ad6549f34ea6900c906ecdc00758651355 Mon Sep 17 00:00:00 2001 From: jamiemlaw Date: Fri, 6 Dec 2013 16:41:34 +0000 Subject: [PATCH 2/2] Delegated bound events to this.view --- src/ui.js | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/ui.js b/src/ui.js index b09db81..3f5b304 100644 --- a/src/ui.js +++ b/src/ui.js @@ -166,19 +166,16 @@ Ply.ui = (function ($) { handler = keys[0]; elem = keys[1]; - // If that element exists - if (this.elements[elem] && this.elements[elem].length) { - // Attach the event to it - this.elements[elem].on(handler, (function (callback, self) { - return function (e) { - // Within the callback, `this` refers to the Ply view, - // not the element the event is attached to, - // so we will pass that element in as a second argument - // for easy access - self[callback](e, e.target); - }; - }(this.__events[id], this))); - } + // Attach the event to the elem, but delegate it to this.view + this.view.on(handler, this.__elements[elem], (function (callback, self) { + return function (e) { + // Within the callback, `this` refers to the Ply view, + // not the element the event is attached to, + // so we will pass that element in as a second argument + // for easy access + self[callback](e, e.target); + }; + }(this.__events[id], this))); } } }