From d4b890eb7113c35b020fe74e56d7d1b0d12b6d4e Mon Sep 17 00:00:00 2001
From: maxpoulin64 <maxpoulin64@gmail.com>
Date: Tue, 4 Mar 2014 00:11:16 -0500
Subject: [PATCH] Allow binding custom events to non-form elements

Epoxy previously refused to bind events to non form elements like <div>s so it was impossible to create bindingHandlers for some UI libraries like jQuery UI's "slide" event. This now allows it to still avoid binding useless events while still allowing custom events to be forced in by the user.
---
 backbone.epoxy.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/backbone.epoxy.js b/backbone.epoxy.js
index d815aa3..924110c 100644
--- a/backbone.epoxy.js
+++ b/backbone.epoxy.js
@@ -1234,20 +1234,13 @@
 			throw('Error parsing bindings: "'+declarations +'"\n>> '+error);
 		}
 
-		// Format the 'events' option:
-		// include events from the binding declaration along with a default 'change' trigger,
-		// then format all event names with a '.epoxy' namespace.
-		var events = _.map(_.union(bindings.events || [], ['change']), function(name) {
-			return name+'.epoxy';
-		}).join(' ');
-
 		// Apply bindings from native context:
 		_.each(bindings, function(accessor, handlerName) {
 
 			// Validate that each defined handler method exists before binding:
 			if (handlers.hasOwnProperty(handlerName)) {
 				// Create and add binding to the view's list of handlers:
-				view.b().push(new EpoxyBinding(view, $element, handlers[handlerName], accessor, events, context, bindings));
+				view.b().push(new EpoxyBinding(view, $element, handlers[handlerName], accessor, bindings.events, context, bindings));
 			} else if (!allowedParams.hasOwnProperty(handlerName)) {
 				throw('binding handler "'+ handlerName +'" is not defined.');
 			}
@@ -1290,12 +1283,24 @@
 		var self = this;
 		var tag = ($element[0].tagName).toLowerCase();
 		var changable = (tag == 'input' || tag == 'select' || tag == 'textarea' || $element.prop('contenteditable') == 'true');
+		var eventsArray = events || [];
 		var triggers = [];
 		var reset = function(target) {
 			self.set(self.$el, readAccessor(accessor), target);
 		};
-    
-    self.view = view;
+		
+		// By default all changeable form elements get the "change" event
+		if (changable) {
+			eventsArray.push('change');
+		}
+		
+		// Add ".epoxy" namespace to all events and join them as jQuery format
+		events = _.map(eventsArray || [], function(name) {
+			return name+'.epoxy';
+		}).join(' ');
+		
+
+		self.view = view;
 		self.$el = $element;
 		self.evt = events;
 		_.extend(self, handler);
@@ -1315,7 +1320,7 @@
 		// => Form element.
 		// => Binding handler has a getter method.
 		// => Value accessor is a function.
-		if (changable && handler.get && isFunction(accessor)) {
+		if (eventsArray.length > 0 && handler.get && isFunction(accessor)) {
 			self.$el.on(events, function(evt) {
 				accessor(self.get(self.$el, readAccessor(accessor), evt));
 			});