These are chat archives for ractivejs/ractive

25th
Oct 2018
kouts
@kouts
Oct 25 2018 17:30
I have created an example here of what seems to me like a bug. I have disabled two way binding on the main instance. When I change the value on the input text then the value on the child component does not change (ok), when I set the value on the component then the value also changes on the parent instance (incorrect?) and it does this only the first time.
Is this a bug or am I doing something wrong? What is the right way to disable twoway binding?
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 18:53
I never needed twoway: false (except in component attributes) but yes, it sounds like a malfunctioning
kouts
@kouts
Oct 25 2018 18:55
I don't use it too tbh but I was presenting Ractive to a fellow JS programmer and we made the test above as poc that Ractive can be used as a top-down style view lib
(you can image the scene - ooops hehehe :blush: )
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 18:58
I know that scene :D
kouts
@kouts
Oct 25 2018 18:59
I can't find the right emoji for it but yes...
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:03
@kouts we might miss something here
I think twoway="false" is only meaningful (and applicable) on native components (ie. inputs etc.). If twoway="false" would disable data setting completely, how could we send data from a component to its root instance?
kouts
@kouts
Oct 25 2018 20:08
via events
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:08
yes, exactly
so the "hello" button does this
take a look at this one Playground
kouts
@kouts
Oct 25 2018 20:09
but apart from that It should not update the value
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:09
which value? the test?
kouts
@kouts
Oct 25 2018 20:10
pressing "Set test to hello" should not update the value on the root instance
which it does and the strange thing is that it does only for one time
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:11

pressing "Set test to hello" should not update the value on the root instance

you just said that it should via events

which it does and the strange thing is that it does only for one time

I know, it looks strange at first but actually it's not. At the first click, it sets test to "Hello" and the readonly input displays that because this is a change from outside. that's normal, right?

on second press, the outside value didn't change, so input does not update itself
kouts
@kouts
Oct 25 2018 20:13
yes maybe via events or via a central store etc but the fact that the value gets updated outside of the component
seems strange
it shouldn't update at all
@this.set('mytest', 'Hello') should have no effect whatsoever on the parent instance
becauase two way databinding is "turned off" globally, at least that's how I think it worked
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:16

it shouldn't update at all

say it isn't updating. How do we update test within the component? there should be a way to do this?

kouts
@kouts
Oct 25 2018 20:16
yes it should update only inside the component's local state
not also on the parent instance
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:18
okay, let's think that it is working in this way. then what is the point of declaring the attribute: "<mycomponent **mytest=**"{{test}}" />"
kouts
@kouts
Oct 25 2018 20:18
to pass the value inside the component
maybe I'm missing something here, I'll try converting the same example to eg vuejs
see how it behaves
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:19
okay. then what is the catch of writing @this.set('mytest', 'Hello')? would it update only a copy of mytest?
kouts
@kouts
Oct 25 2018 20:20
mytest is just a string it should not pass down by reference
(arrays and objects another story)
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:22
I'm interpreting your code by myself. I'm assuming that I'm the component. What should I do with set('mytest', value)? should I create a copy of mytest and update it?
kouts
@kouts
Oct 25 2018 20:23
I'm assuming since twoway is turned off that yes
Cerem Cem ASLAN
@ceremcem
Oct 25 2018 20:29
thinking twice, you may be right. twoway="false" has no effect on the component: Playground
I also would expect twoway: false or twoway="false" has an effect on the component (or its instance)
kouts
@kouts
Oct 25 2018 20:57
Ok I have made an example with vue, seems that vue issues a warning when you try to manipulate a prop passed from parent to child from inside the child
check it here
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "mytitle"
kouts
@kouts
Oct 25 2018 21:04
In order to "overcome" this issue in view a copy of the prop being passed down must be created as in here
So I don't now how Ractive should behave, maybe this is the expected behavior
Chris Reeves
@evs-chris
Oct 25 2018 22:18
haven't fully sorted everything so far, but I can confirm that twoway only affects form bindings and not component mappings
if you want to just pass the value in, you can use a static computed binding or on-init set