Search code examples
ractivejs

How do you capture events from inside a Ractive Component's {{>content}} partial?

Lets say I have a modal component defined which defines a container for other content inside the modal window.

I can define that content with the {{>content}} partial, but if any of that content contains events like on-click, I can't capture that event from the Ractive that defines that content.

I can only capture those events from the component.

Is there anyway to make this work?

Solution

  • The only possible way is to manually bubble the events:

    <modal on-a="b">
    <div on-click="a">Click Me!</div>
</modal>

    ractive.on('b', function () {});

    We are currently discussing event bubbling and {{yield}} keyword which will help in situations like this.