Aurelia JS - multi level binding/update?

1
votes

I'm not sure whether I'm using the right terminology here - but here is an example:

This is how it looks like in Chromium:

gistrun

Basically, the entries on top (red outline) are a visualization of an array as the "first-level" data display; here one can toggle each element's selection, and make a multi-element selection (red background). The array that is the source of the "first-level" display is mydata in first-level-items.js.

Those items that are selected in "first-level", are then shown again in "second-level" (green outline); here the same information of name and value is displayed, although a bit differently. Here also one can toggle an elements selection - but only one "second-level" element can be selected. The array that is the source of the "second-level" display is myseldata in second-level-items.js.

The intent here, is that once a "second-level" selection has been made, a slider appears, to change the .value property of the particular object which is the selected array element.

My original question (which is why I started this post/example at all), was:

  • How do I ensure that whenever the slider is changed, the value is updated in both second-level and first-level display?

... however, for reasons beyond me, this in fact does work somewhat in this gist.run example (but it still doesn't work in my actual project, which forced me to come up with the example to begin with). Also it only works somewhat, in the sense that when loading the example page at first, after making first and second level selections, and then changing the slider, the .value will be updated in both first- and second-level display. But as soon as I try deselecting on second level - or changing the selection on second level - then updating stops. So, I guess this question still stands...

  • After a second-level selection has been made, deselecting on second level (by clicking to toggle) does NOT remove the slider; how can I have it behave like that?

  • The update happens only on the slider's onChange - basically, while you drag and slide, this component emits onSlide, but it will generate onChange only at the end when the mouse is released (that is, when the sliding has stopped). How can I update both first- and second- level display while the slider is sliding?

And finally - is this how this kind of a problem is best addressed in Aurelia? That is - I currently have one array in first-level-items.js; first-level-items.js then has a singleton reference to second-level-items.js, so it can call a method within it, to change a filtered copy of the array on the second level, which then serves as a source both for second-level display and the slider... Is there a better way to organise this?

1
javascriptaurelia

1 Answers

0
votes

Boy, this was a pain, but here's what I think is the solution:

Here are some notes:

  • Apparently, there is something wrong applying if.bind or show.bind on the input element of the slider - instead, the input element should be put in an enclosing div, and the div should have if/show.bind applied
  • Furthermore, if.bind should not be used, as it re-instantiates the slider element - use show.bind so we can get a reference to the slider widget at start already, even if it is hidden
  • Seemingly, using TaskQueue in attached() is the only way to get a reference to the slider at start
  • Once we have a reference to the widget, re-apply it on each second level element, whenever they change
  • Do not set this.myselChanging to null to specify no target of the slider (simply count on hiding the slider appropriately)
  • For a continuous change (onSlide), simply use this.myselChanging.value = e.value; in the handler - both first-level and second-level values will be changed

Beyond this, it seems arrays are copied by reference, so the multi-level update happens without further intervention...

Though, would still love to know what is the proper way to do this...