These are chat archives for ractivejs/ractive

6th
Dec 2017
Anatoli Radulov
@avoto
Dec 06 2017 01:58
@PaulMaly_twitter by vanilla component I meant an html file as per the component spec.
Anatoli Radulov
@avoto
Dec 06 2017 02:13

Re: passing data to child component 1) it is just a subset of the parent's data 2) I was trying to avoid having to refer to the data passed by the parent as a specific field inside the child. In my case I have something like this
{{#each model as complexObjectWithLotsOfFields}} <isolatedComponent modelValue="{{complexObjectWithLotsOfFields}}"> {{/each}}

then inside the isolatedComponent I have to do this.get('modelValue.someNestedValue') vs this.get('someNestedValue') if setting the isolatedComponent's whole data through an attribute was possible. Currently Inside the isolatedComponent I simply do {{#with modelValue}} ... {{/with}} which works fine, and was just wondering if there's a better way, when I posted yesterday.

Paul Maly
@PaulMaly_twitter
Dec 06 2017 10:12
@avoto You mean HTML Web components spec or Ractive's "single file components" ?
Cerem Cem ASLAN
@ceremcem
Dec 06 2017 10:13
Question: is there an elegant way to add a class name on an event? like a combination of class-* and on-hover=?
Paul Maly
@PaulMaly_twitter
Dec 06 2017 10:18
@avoto ok, but if your child component don't have any other private data, why it's isolated and why it's not just a partial? It has some component-specific logic or what? I believe you already use the best approach {{#with modelValue}} ... {{/with}}, because in this case you have an isolated component and able to have some private data too.
@ceremcem You mean css class name needs to be passed to the event handler?
Cerem Cem ASLAN
@ceremcem
Dec 06 2017 12:16

@PaulMaly_twitter for example, I want to add/remove a class (my-foo-state) on hover. I need something like `

<myComponent class-my-foo-state="fooState" on-mouseenter="@.set('fooState', true)" on-mouseleave="@.set('fooState', false)" />

That will toggle my-foo-state class on hover. I'm looking for something like that, just a little bit more elegant one.

Paul Maly
@PaulMaly_twitter
Dec 06 2017 12:38
@ceremcem hm, I think we can re-write your example more elegant like this:
<myComponent class-my-foo-state="fooState" on-mouseenter-mouseleave="toggle('fooState')"></myComponent>
Or even using plain js:
<myComponent on-mouseenter-mouseleave="@node.classList.toggle('my-foo-state')"></myComponent>
Paul Maly
@PaulMaly_twitter
Dec 06 2017 12:43
here we don't need to have additional state "fooState"
Cerem Cem ASLAN
@ceremcem
Dec 06 2017 12:45
first example is not working correctly in this case
...and the second one works like a charm
thanks!
Paul Maly
@PaulMaly_twitter
Dec 06 2017 12:48
yep, because of shared "fooState" ))) also you can add on-hover event plugin to reduce the code:
<myComponent on-hover="@node.classList.toggle('my-foo-state')"></myComponent>
Cerem Cem ASLAN
@ceremcem
Dec 06 2017 12:49
is on-hover working for you?
Paul Maly
@PaulMaly_twitter
Dec 06 2017 12:50
I hope, actually I didn't check it now. It's old and could be broken. But you can write your own))
Cerem Cem ASLAN
@ceremcem
Dec 06 2017 13:02
a-ha, I didn't add the https://cdn.jsdelivr.net/npm/ractive-events-hover dependency
quite nicer
Paul Maly
@PaulMaly_twitter
Dec 06 2017 13:03
yes, it's external plugin