'$if' causes an error when triggered by a state change from another component #41
Description
This doesn't happen when all the code is in one component. Only when I have two components like this:
FamousFramework.component('ildar:my-component', {
behaviors: {
'#test': {
'$if': function(example) {
return example === 'a';
},
},
},
events: {
'#test': {
'test-event': function($state) {
$state.set('example', 'b');
}
}
},
states: {
'example': 'a',
},
tree: `
<ildar:test id="test"></ildar:test>
`
});
The other component emits an event (and the previous component above listens to it).
FamousFramework.component('ildar:test', {
behaviors: {
'#clickNode': {
'content': "Click me",
}
},
events: {
'#clickNode': {
'click': function($dispatcher) {
$dispatcher.emit('test-event');
}
},
},
tree: `
<node id="clickNode"></node>
`
});
Clicking on the node causes the following error: Uncaught TypeError: Cannot read property 'parentNode' of null in the while statement of the function defined in famous-framework.development.bundle.js:
Dispatcher.prototype.emit = function(key, message) {
var element = this.domNode;
var event = new CustomEvent(key, {
detail: message,
bubbles: true
});
if (Dispatcher.willEventsBubbleInDetachedDOM) {
element.dispatchEvent(event);
}
else {
while (element.parentNode) {
element.dispatchEvent(event);
element = element.parentNode;
}
}
};