These are chat archives for ractivejs/ractive

8th
Jun 2018
kouts
@kouts
Jun 08 2018 07:38
Question: I know you can subscribe to listen to events from child components on the parent component e.g on ChildComponent.childevent
but what about when you need to listen for an event from a sibling component?
how you do it then? Is there a best practice?
Paul Maly
@PaulMaly_twitter
Jun 08 2018 07:43
@kouts regarding first question, you can do it in multiple ways:
directly on child component tag:
<child on-eventName="doSomething">
in parent component declaration:
export default Ractive.extend({
    components: {
        child: Child
    },
    on: {
        'child.eventName': () => {}
    }
});
Or in imperative manner:
this.on('child.eventName', () => {})
kouts
@kouts
Jun 08 2018 07:47
Thanks @PaulMaly_twitter I already do that
but what about when you have two components under the same parent
and you want to listen to events from one to the other, is there a way to do that?
Paul Maly
@PaulMaly_twitter
Jun 08 2018 07:49
about second question, for my opinion it's not good design, but seems you can get instance of sibling component and listen events in imperative manner:
const siblings = this.parent.findAllComponents(this.component.name);

siblings.forEach(sibling => {
     sibling !== this && sibling.on('eventName', doSomething)
});
I not checked that, but it could look like this.
kouts
@kouts
Jun 08 2018 07:54
Ok I also know that :smile:
Paul Maly
@PaulMaly_twitter
Jun 08 2018 07:54
and whats a point of your question?
kouts
@kouts
Jun 08 2018 07:55
so they must have a parent -> child relationship in order for on to work
Paul Maly
@PaulMaly_twitter
Jun 08 2018 07:56
in this case, yes. is your case different? maybe I just don't get it
kouts
@kouts
Jun 08 2018 07:57
you got it allright
Paul Maly
@PaulMaly_twitter
Jun 08 2018 07:58
is question closed or you want to find more elegant solution?
kouts
@kouts
Jun 08 2018 08:01
I thought that doing *.somevent from a sibling component might work, but is now clear to me that there must be a parent - child relationship
thanks @PaulMaly_twitter
Chris Reeves
@evs-chris
Jun 08 2018 19:49
you could also this.parent.on('*.someevent', ...), and in fact, I often use this.root.on('*.whatever', ...) as an event bus of sorts
Cerem Cem ASLAN
@ceremcem
Jun 08 2018 21:03
@kouts is there an undeterminated amount of components in the same level which are to communicate with eachother?
kouts
@kouts
Jun 08 2018 21:12
thanks @evs-chris I'm aware of these options too and actually I'm using them, I just asked in order to be sure that events cannot be "listened" from sibling components in case there was some feature I was missing
@ceremcem there are just two components which are at the same level
something like
<root>
<child1 />
<child2 />
</root>
so child1 emits an event, how do you listen that event from child2
that was the question and all previous answers are of course valid
Cerem Cem ASLAN
@ceremcem
Jun 08 2018 21:19
I have a radio-buttons component where the pressed button (eg. child1) emits an event to root component and root changes child1 color to active and child2 (and the rest) to passive value. does this scenario fit into your case?
I'm following @evs-chris' suggestion
kouts
@kouts
Jun 08 2018 21:21
that's probably what I'll end up doing so yes
:+1: