These are chat archives for ractivejs/ractive

16th
May 2018
Chris Reeves
@evs-chris
May 16 2018 00:19
I have been thinking about making a vscode editor plugin for single file components, but I think template node types is a little out of scope for that 😁
Cerem Cem ASLAN
@ceremcem
May 16 2018 00:37
"a little" :DDD
no, really, I get the idea
Cerem Cem ASLAN
@ceremcem
May 16 2018 00:55
another topic: shouldn't ractive.updateModel trigger ractive.observe handler as if it has changed?
in other words, I want to trigger ractive.observe handler as if the keypath has changed, shouldn't I use ractive.updateModel?
Cerem Cem ASLAN
@ceremcem
May 16 2018 01:07
(I have a workaround now, but still interested in the answer)
Chris Reeves
@evs-chris
May 16 2018 01:45
updatemodel only looks at two way bindings, so unless you've changed the value of an input in a non-observable way e.g. input.value = 'something different', it won't actually do anything
Cerem Cem ASLAN
@ceremcem
May 16 2018 01:46
my usage scenario is as follows: I have a dropdown component which sets selected-key attribute. when you click the dropdown, it lists every item found in its data attribute
if selected-key is set before data is loaded, then it doesn't shows the selected-key visually. Thus, I'm forcing to refresh it whenever data is changed
so, I think selected-key is bound in a observable way
I think best way is preparing a minimal example in the playground
let me do that
Cerem Cem ASLAN
@ceremcem
May 16 2018 02:05
Arnaud Dagnelies
@dagnelies
May 16 2018 14:54
What's exactly your goal? (not how) ...from what I see all your observers have no real purpose
Cerem Cem ASLAN
@ceremcem
May 16 2018 14:55
I'm updating the dropdown's selected item whenever data is changed. the dropdown is not that simple, it's SemanticUI's dropdown, so it has its own API to set the visual
Arnaud Dagnelies
@dagnelies
May 16 2018 14:59
...and from a "data" perspective, if I change the list, what should the new "selected" value be?
why not invoke a simple this.set('selected', 'newValueWhatsoever') ?
or just 'sematic.applyWhatever' in the observer?
Cerem Cem ASLAN
@ceremcem
May 16 2018 15:00
think that my selected key is "foo" and no data is loaded at the beginning. the dropdown shouldn't show anything (and display a "loading" icon)
after data is loaded, it can find "foo" within the data and display "The Foo" as dropdown's selected item
Arnaud Dagnelies
@dagnelies
May 16 2018 15:02
then I'd use a computed which is null or so while data is empty, and is the value if the data is present
or put it directly in the template with {{#if !data}}Loading...{{else}}...{{/if}}
Cerem Cem ASLAN
@ceremcem
May 16 2018 15:04
damn.. correct, so it can handle the dependency management out of the box
actually it's not simple this.set(...) operation, because when dropdown mode is "multiple", things change dramatically
in my workaround, I defined a function and called that function both by this.observe('selected', myfunc) and this.observe('data...
but question is same: shouldn't this.update(keypath) trigger the observer?
Arnaud Dagnelies
@dagnelies
May 16 2018 15:08
well, I'd personally avoid calling things like update and such. IMHO, it means your data binding is broken/clunky and you resort to hacky workarounds.
when the data changes, the observer is called, no more, no less. There should be no need to trigger it manually.
I just had a look at the tags multiselect box from semantic UI. If you want to wrap such "complex" components, I recommend following approach:
Arnaud Dagnelies
@dagnelies
May 16 2018 15:13
in the oninit of the component, invoke the appropriate semantic constructor on your element
now there are two steps: 1. the component changes stuff -> ractive has to be updated. This is usually done by providing change listeners in the "semantic" constructor that will apply ractiveComponent.set(...) to set the appropriate data.
  1. when ractive data changes, apply it to the component. This is usually done with a simple observer propagating the change to the semantic widget data model
Lastly, in order to be clean and avoid infinite loops by having 1. and 2. recursively calling each other, setting/checking a temporary flag is appropriate.
Here is a minimal example of a wrapped widget:
Cerem Cem ASLAN
@ceremcem
May 16 2018 15:20
that's fine with me. but the problem arises when a component needs to display a data after an inner join, with a lately bound data
Arnaud Dagnelies
@dagnelies
May 16 2018 15:55
...sorry, I don't understand what you mean ...looks quite complicated for a simple select
Chris Reeves
@evs-chris
May 16 2018 16:34
for updateModel, the only way that works is if the select has already changed
I think what you may be after is an array observer, which would tell you what items are added/removed when a push, pop, splice, etc happens on a keypath
Arnaud Dagnelies
@dagnelies
May 16 2018 17:24
The demo of the day:
Chris Reeves
@evs-chris
May 16 2018 17:43
nice!
kouts
@kouts
May 16 2018 18:41
@dagnelies :clap: