Sets its name inside the listener function. Fixes #222

metal · Mar 31, 2017 · 62f8d28 · 62f8d28
1 parent fa34ecc
commit 62f8d28
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/packages/metal-incremental-dom/src/render/attributes.js b/packages/metal-incremental-dom/src/render/attributes.js
@@ -83,7 +83,8 @@ export function convertListenerNamesToFns(component, config) {
 
 /**
  * Converts the given attribute's value to a function reference, if it's
- * currently a listener name.
+ * currently a listener name. It also register the listener name for
+ * further usage.
  * @param {!Component} component
  * @param {string} name
  * @param {*} value
@@ -95,7 +96,7 @@ function convertListenerNameToFn_(component, name, value) {
 		const eventName = getEventFromListenerAttr_(name);
 		if (eventName) {
 			const fn = getComponentFn(component, value);
-			fn.givenAsName_ = name;
+			fn.givenAsName_ = value;
 			return fn;
 		}
 	}

diff --git a/packages/metal-incremental-dom/test/IncrementalDomRenderer.js b/packages/metal-incremental-dom/test/IncrementalDomRenderer.js
@@ -451,6 +451,22 @@ describe('IncrementalDomRenderer', function() {
 	});
 
 	describe('Inline Listeners', function() {
+		it('should shows the listener name in the dom element', function() {
+			class TestComponent extends Component {
+				render() {
+					IncDom.elementOpen('div');
+					IncDom.elementVoid('div', null, null, 'onClick', 'handleClick');
+					IncDom.elementClose('div');
+				}
+			}
+			TestComponent.RENDERER = IncrementalDomRenderer;
+			TestComponent.prototype.handleClick = function() {};
+
+			component = new TestComponent();
+			let elementChild = component.element.querySelector('div');
+			assert.strictEqual('handleClick', elementChild.dataset.onclick);
+		});
+
 		it('should attach listeners from "on<EventName>" attributes', function() {
 			class TestComponent extends Component {
 				render() {

diff --git a/packages/metal-incremental-dom/test/render/attributes.js b/packages/metal-incremental-dom/test/render/attributes.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import { applyAttribute } from '../../src/render/attributes';
+import { applyAttribute, convertListenerNamesToFns } from '../../src/render/attributes';
 import dom from 'metal-dom';
 import Component from 'metal-component';
 
@@ -50,6 +50,20 @@ describe('attributes', function() {
 	});
 
 	describe('listeners', function() {
+		it('should register the method name inside the listener', function() {
+			class TestComponent extends Component {
+			}
+			TestComponent.prototype.handleClick = function() {};
+			component = new TestComponent();
+
+			let config = {
+				'data-onclick': 'handleClick'
+			};
+
+			convertListenerNamesToFns(component, config);
+			assert.strictEqual('handleClick', config['data-onclick'].givenAsName_);
+		});
+
 		it('should attach listeners functions passed to "data-on<eventname>" attributes', function() {
 			class TestComponent extends Component {
 			}