Sets its name inside the listener function. Fixes #222

packages/metal-incremental-dom/src/render/attributes.js

@@ -64,7 +64,7 @@ function attachEvent_(component, element, attr, eventName, fn) {
 /**
  * Converts all event listener attributes given as function names to actual
  * function references. It's important to do this before calling the real
- * incremental dom `elementOpen` function, otherwise if a component passes a
+ * incremental dom `elementOpen` function, otherwise if a component passes
  * the same function name that an element was already using for another
  * component, that event won't be reattached as incremental dom will think that
  * the value hasn't changed. Passing the function references as the value will
@@ -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;
 		}
 	}

packages/metal-incremental-dom/test/IncrementalDomRenderer.js

@@ -451,6 +451,22 @@ describe('IncrementalDomRenderer', function() {
 	});
 
 	describe('Inline Listeners', function() {
+		it('should show 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.getAttribute('data-onclick'));
+		});
+
 		it('should attach listeners from "on<EventName>" attributes', function() {
 			class TestComponent extends Component {
 				render() {

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 {
 			}