These are chat archives for ractivejs/ractive

12th
Mar 2019
Joe Turner
@JoeTurner-IR
Mar 12 18:08
I'm working on a modal component that I want to be able to use like this:
<modal> custom content </modal>
however I want it to render to the body and still have the bindings attached
if I do el: document.body I get:
The <modal> component has a default 'el' property; it has been disregarded
potentially because of the rvc setup I have
can anyone think of a solution?
could move it with vanilla javascript after render but then it loses it's bindings
so maybe there's a way to keep it's bindings?
Joe Turner
@JoeTurner-IR
Mar 12 18:19
ah, apparently this.insert(document.body); should work
it doesn't for some reason, the modal remains in the same place with no errors in the console
hmm
Joe Turner
@JoeTurner-IR
Mar 12 18:29
it was because the html part of the template looked like this:
{{#if visible}}
    <div>modal stuff</div>
{{/if}}
where visible was false when the this.insert() was called
wrapped the template in <div></div> worked :)
Joe Turner
@JoeTurner-IR
Mar 12 19:09
ah, it still loses it's events...
Chris Reeves
@evs-chris
Mar 12 20:04
what events is it losing?
also, you might get farther with a modal like that using a macro partial for the inline side that controls an outside modal component
Joe Turner
@JoeTurner-IR
Mar 12 21:19
seems like if you bind the component to the window then you can still trigger events from the console, but the <div on-click="customEvent"></div> don't seem to work
weird because there are other components in our codebase doing this same this.insert(document.body) and there events are firing without problem
Chris Reeves
@evs-chris
Mar 12 23:04
can you put together a sample fiddle that I can poke at a bit? this sounds like something that should work, but my sad brain is having trouble piecing it together
also, sorry about the delay, but gitter doesn't usually notify me until an hour or two after posts and then only by email