From fa34eccea07693837c2cbbda706cd42758acd30f Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Fri, 31 Mar 2017 12:35:07 -0300 Subject: [PATCH 1/3] Fix typo --- packages/metal-incremental-dom/src/render/attributes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/metal-incremental-dom/src/render/attributes.js b/packages/metal-incremental-dom/src/render/attributes.js index f2d159a1..02d9719d 100644 --- a/packages/metal-incremental-dom/src/render/attributes.js +++ b/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 From f9fa01e57399a5ea9852a7c519464df992e04906 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Fri, 31 Mar 2017 12:40:14 -0300 Subject: [PATCH 2/3] Sets its name inside the listener function. Fixes #222 --- .../src/render/attributes.js | 5 +++-- .../test/IncrementalDomRenderer.js | 16 ++++++++++++++++ .../test/render/attributes.js | 16 +++++++++++++++- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/packages/metal-incremental-dom/src/render/attributes.js b/packages/metal-incremental-dom/src/render/attributes.js index 02d9719d..036afacc 100644 --- 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 index 24b237d3..d33657df 100644 --- 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 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.dataset.onclick); + }); + it('should attach listeners from "on" 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 index ec7ffc0b..7c27e9b4 100644 --- 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" attributes', function() { class TestComponent extends Component { } From d7bac210a7d576628957e1910f18227ba3739992 Mon Sep 17 00:00:00 2001 From: Fernando Souza Date: Sat, 1 Apr 2017 00:58:01 -0300 Subject: [PATCH 3/3] Uses getAttribute instead of dataset in order to get it working on IE --- packages/metal-incremental-dom/test/IncrementalDomRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/metal-incremental-dom/test/IncrementalDomRenderer.js b/packages/metal-incremental-dom/test/IncrementalDomRenderer.js index d33657df..60e05dc2 100644 --- a/packages/metal-incremental-dom/test/IncrementalDomRenderer.js +++ b/packages/metal-incremental-dom/test/IncrementalDomRenderer.js @@ -464,7 +464,7 @@ describe('IncrementalDomRenderer', function() { component = new TestComponent(); let elementChild = component.element.querySelector('div'); - assert.strictEqual('handleClick', elementChild.dataset.onclick); + assert.strictEqual('handleClick', elementChild.getAttribute('data-onclick')); }); it('should attach listeners from "on" attributes', function() {