These are chat archives for ractivejs/ractive

7th
Mar 2018
Anatoli Radulov
@avoto
Mar 07 2018 00:17

Hey guys I have a question.

I have a component included like this: <foo></foo> which I want attached to BODY vs where it is defined.

So I tried doing:

onconfig : function() { this.append = true; this.el = document.body; }

but got an error Error: You cannot call ractive.render() on an already rendered instance! Call ractive.unrender() first

Anatoli Radulov
@avoto
Mar 07 2018 00:22
Also, just a note on what I am trying to do, I want the component to attach to BODY before it renders. Calling this.insert(document.body) in the onrender handler works, but results in some issues which I am trying to avoid.
Chris Reeves
@evs-chris
Mar 07 2018 00:30
so const c = new MyComponent(); c.insert(document.body); is not an option?
Anatoli Radulov
@avoto
Mar 07 2018 00:30
nope
Chris Reeves
@evs-chris
Mar 07 2018 00:31
it shouldn't be rendered if you specify no target or el, which is a completely valid thing to do
it will just init, config, etc and stop short of render with no target
you can then trigger the render to wherever, but you have to manage the component manually
Anatoli Radulov
@avoto
Mar 07 2018 00:32
In my case the component is included as part of the markup inside another component (which I am trying to avoid controlling). Eg some other developer types <foo></foo>
Chris Reeves
@evs-chris
Mar 07 2018 00:33
ah, that's unfortunate
aside from detach and insert, I don't know that it's possible at this point
Anatoli Radulov
@avoto
Mar 07 2018 00:35
I see. The reason from staying away from insert in this case is because for some strange reason (and only with this component) all proxy events stops working if I call this.insert() in the onrender handler.
I have no explanation why events don't work if I detach() and insert() (just insert() in my case)
Chris Reeves
@evs-chris
Mar 07 2018 00:36
there's probably a loop involved
try delegate: false as an option on the containing instance
Anatoli Radulov
@avoto
Mar 07 2018 00:37
I'll give it a try! Thanks
Anatoli Radulov
@avoto
Mar 07 2018 00:49
Today is not my lucky day... delegate: false didn't fix it (on the parent). I am quite puzzled as to why is this happening. Literally all event handling is not working once this.insert(document.body) is called. Similar components in other places work just fine, no such issue. I will keep digging.
Chris Reeves
@evs-chris
Mar 07 2018 01:06
are you on edge?
Anatoli Radulov
@avoto
Mar 07 2018 01:07
no, I am on latest (0.9.13)
Chris Reeves
@evs-chris
Mar 07 2018 01:08
I can take a swing at allowing you to change targets during config, but it will be on edge
Anatoli Radulov
@avoto
Mar 07 2018 01:09
I can switch to edge to see if this is resolving the issue and if it does, just sync my release with Ractive's :)
Chris Reeves
@evs-chris
Mar 07 2018 01:52
when travis is done doing his thing, you should be able to set a target in config
there may be some more corner-case-y things that go along with it, because it's off-label use, but it won't die
( edge)
Anatoli Radulov
@avoto
Mar 07 2018 01:55
I will wait for Travis and then give it a try (with edge). Thanks a lot of implementing this on such a short notice Chris!
Chris Reeves
@evs-chris
Mar 07 2018 01:57
it was throwing a weird exception that needed to be handled, and the behavior you're looking for is arguably useful for many kinds of components (modals, light boxes, etc), so I'd consider it a bug that needed addressing 😁
Anatoli Radulov
@avoto
Mar 07 2018 01:59
Yeah, having the ability to change the target (el) during config is quite a nice feature and can be useful in many places!
Anatoli Radulov
@avoto
Mar 07 2018 02:25
And it works! :clap:
Chris Reeves
@evs-chris
Mar 07 2018 02:26
:tada:
let me know if any weirdness crops up
Anatoli Radulov
@avoto
Mar 07 2018 03:31
After spending a bit more time, I noticed this issue when the onconfig is present.
Chris Reeves
@evs-chris
Mar 07 2018 04:21
is that happening in your project?
cause it looks like the case of the stuck cache in the playground
Anatoli Radulov
@avoto
Mar 07 2018 04:28
Nope, I have refactored things in my project, and wasn’t yielding so decided to check how yield plays along (my initial scenario) with edge by using the playground when I noticed the error.
Larry Osborn
@larryosborn
Mar 07 2018 17:52
Is there a good approach to sharing data between distant components? Like some deep child component and a header component on a parent view. Like binding a boolean for a loading indicator, or an error alert bar.
Currently I’m have things like bind-loading, bind-error on all my components, and that just feels wrong now.
I’m not sure how I feel about doing this.root.set(‘loading’, true) for example
Paul Maly
@PaulMaly_twitter
Mar 07 2018 17:53
ractive.set(‘@shared.youdata’, ‘hello world’)
Larry Osborn
@larryosborn
Mar 07 2018 17:56
Wow, well that is nice!
kouts
@kouts
Mar 07 2018 18:05
there's also setShared
(undocumented AFAIK)
Paul Maly
@PaulMaly_twitter
Mar 07 2018 18:06
nope
sharedSet
kouts
@kouts
Mar 07 2018 18:07
ahh was the other way around :smile:
Paul Maly
@PaulMaly_twitter
Mar 07 2018 18:09
@larryosborn you also able to use @shared in your templates and it's "reactive" like any other data
{{#if @shared.loading }}
<Loading/>
{{/if}}