nested child and events

[karlseguin]

The examples and test show how a parent can listen to children events via `m-on:increment='incrementTotal'. And that works fine. However, when I nest things I get

this.data[method] is undefined on

moon/dist/moon.js

Line 1768 in 289a532

return this.data[method].apply(this, args);

You can see an example here:
https://jsfiddle.net/th6c3qgm/

It looks like the emit is trying to execute childClicked on the root, not the parent container.

May or may not be related, but I was also getting a problem where handlers wasn't an an array here:

moon/dist/moon.js

Line 1835 in 289a532

handlers[i](meta);

which I think is caused by not wrapping this value in an array:

moon/dist/moon.js

Line 587 in 289a532

events[eventType] = eventListeners[eventType];

events[eventType] = eventListeners[eventType];
// should maybe be:
events[eventType] = [eventListeners[eventType]];

But I'm not sure about this 2nd issue as I can't seem to reproduce it.

[kbrsh]

First of all, thanks for creating such a detailed reproduction and description of the issue. I really appreciate you taking the time to try the latest version on Github and account for undocumented breaking changes.

This bug is pretty complex, but I've managed to track it down. Basically, when a component is created (in this case the container component), it is diffing with the node. In this case, Moon will replace the container element with a new div element. When creating this node, Moon won't account for components and will just create DOM nodes.

When diffing components, Moon combines all of the events for a single type into one master handler function. This handler function has a handlers property which it iterates through and calls all of the functions that are contained within it.

This makes it easier to replace event listeners without doing an addEventListener and removeEventListener every time.

I'll definitely fix this, thanks again!

[kbrsh]

Alright so the second issue should be resolved, but your example won't work unfortunately. The scope for all items in the root template is for the root, meaning that the childClicked handler will be undefined.

This is the case in Vue as well. A better reproduction would be like this. Basically, the issue happens when a nested component has events, because a handler is created when it shouldn't be.

Another restriction that will be documented is that a component cannot act as a wrapper for another component.

For example, a parent component can't have a template of:

<child></child>

It must have some sort of wrapper element. That is done because Moon detects components based on their underlying DOM node, and when both are bound to the same DOM node, it'll have some trouble figuring out which is which.