Adding another custom attribute. on-event Version bump 2.1.0. Added notes to the readme.

Author: Greg Larrenaga

Diff for: README.md

@@ -114,6 +114,8 @@ Each custom attribute must have the following methods.
         // el === The element in question.
         // value === could be a function, a value, anything really. Depends on what you passed the binding.
 
+        // NOTE: The scope of this closure is the bound object. so, `this` === the view you are binding
+
         // You add event listeners, do work etc here.
     },
     unbind : function(el, value) {
@@ -213,4 +215,15 @@ customAttributes.addAttribute('on-click', require('simple-custom-attributes/attr
 <div on-click='someMethod'></div>
 ```
 
+#### on-event='{ event : method, event : method }'
+```javascript
+var customAttributes = require('simple-custom-attributes');
+
+customAttributes.addAttribute('on-event', require('simple-custom-attributes/attributes/on-event'));
+```
+
+```html
+<div on-event='{ mouseover : handleMouseOver, mouseout : handleMouseOut }'></div>
+```
+
 Let me know how it goes!!!

Diff for: attributes/on-event.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var parseKeyValuesFromObjectLiteralString = require('parse-keys-and-values-from-object-literal-strings');
+
+module.exports = {
+    bind: bind,
+    unbind: unbind
+};
+
+function bind(el, value) {
+    var parsedValues = parseKeyValuesFromObjectLiteralString(value);
+
+    parsedValues.forEach(function(parsedValueObj) {
+        var handler = this[parsedValueObj.value].bind(this);
+
+        this[parsedValueObj.value] = handler;
+
+        el.addEventListener(parsedValueObj.key, handler, {
+            capture : false
+        });
+    }.bind(this));
+}
+
+function unbind(el, value) {
+    var parsedValues = parseKeyValuesFromObjectLiteralString(value);
+
+    parsedValues.forEach(function(parsedValueObj) {
+        el.removeEventListener(parsedValueObj.key, this[parsedValueObj.value], {
+            capture : false
+        });
+    }.bind(this));
+}

Diff for: index.js

@@ -16,9 +16,9 @@ function register(object, rootElement) {
             if(typeof object[element.getAttribute(customAttribute)] === 'function') {
                 _registerFunction.call(this, object, element, customAttribute);
             } else if(object[element.getAttribute(customAttribute)] !== undefined){
-                this.attributesMap[customAttribute].bind(element, object[element.getAttribute(customAttribute)]);
+                this.attributesMap[customAttribute].bind.call(object, element, object[element.getAttribute(customAttribute)]);
             } else {
-                this.attributesMap[customAttribute].bind(element, element.getAttribute(customAttribute));
+                this.attributesMap[customAttribute].bind.call(object, element, element.getAttribute(customAttribute));
             }
 
         }.bind(this));
@@ -32,9 +32,9 @@ function unregister(object, rootElement) {
             if(typeof object[element.getAttribute(customAttribute)] === 'function') {
                 _unregisterFunction.call(this, object, element, customAttribute);
             } else if(object[element.getAttribute(customAttribute)] !== undefined) {
-                this.attributesMap[customAttribute].unbind(element, object[element.getAttribute(customAttribute)]);
+                this.attributesMap[customAttribute].unbind.call(object, element, object[element.getAttribute(customAttribute)]);
             } else {
-                this.attributesMap[customAttribute].unbind(element, element.getAttribute(customAttribute));
+                this.attributesMap[customAttribute].unbind.call(object, element, element.getAttribute(customAttribute));
             }
 
         }.bind(this));
@@ -50,9 +50,9 @@ function _registerFunction(object, element, customAttribute) {
 
     object[element.getAttribute(customAttribute)] = handler;
 
-    this.attributesMap[customAttribute].bind(element, handler);
+    this.attributesMap[customAttribute].bind.call(object, element, handler);
 }
 
 function _unregisterFunction(object, element, customAttribute) {
-    this.attributesMap[customAttribute].unbind(element, object[element.getAttribute(customAttribute)]);
+    this.attributesMap[customAttribute].unbind.call(object, element, object[element.getAttribute(customAttribute)]);
 }

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-custom-attributes",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -18,6 +18,7 @@
   "description": "",
   "devDependencies": {
     "clamp-js": "^0.7.0",
-    "hammerjs": "^2.0.8"
+    "hammerjs": "^2.0.8",
+    "parse-keys-and-values-from-object-literal-strings": "^1.0.0"
   }
 }