Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'$if' causes an error when triggered by a state change from another component #41

Open
ildar-samit opened this issue Jul 1, 2015 · 2 comments
Labels

Comments

@ildar-samit
Copy link

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;
        }
    }
};
@ildar-samit ildar-samit changed the title '$if' causes an error when used with two components '$if' causes an error when triggered by a state change from another component Jul 1, 2015
@matthewtoast
Copy link
Contributor

Great catch. We'll work to get a fix in for this.

@arkadyp
Copy link

arkadyp commented Jul 6, 2015

Fixed with cc0ce9c. This commit refactors the Dispatcher.emit method to record all the ancestors before dispatching events. This change prevents a race condition in which an element is removed from the detached DOM midway through moving up the ancestor chain.

When you get a chance, could you please double check that this update resolved the issue you encountered?

@arkadyp arkadyp added the bug label Jul 7, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants