binding / syncing two componets

Webix JS
1

Hi, I’m trying to synchronize two components: a counter and a slider, so that:

  • if the slider is moved, then the counter shows that number
  • if the counter is changed, then the slider shows that number

Also I’d like to trigger an event when either change, and also I’d like to be able to programmatically change them.

So, I’m not sure if this is a ‘binding’ problem, or a ‘syncing’ problem.

Also, I’m not sure if one should be a master and the other a slave, or whether I should create an invisible databound object which would be the master.

David

2

Simplest solution would be to use events of both components to link them

$$("s1").attachEvent("onSliderDrag", function(){
  $$("c1").setValue(this.getValue());
});
  
$$("c1").attachEvent("onChange", function(){
  $$("s1").setValue(this.getValue());
})

http://webix.com/snippet/c38490e8

If you wish to use data binds - yep you can use cross binds

http://webix.com/snippet/8a1c1f22

The same code doesn’t work for slider unfortunately, because slider currently doesn’t fire onChange event. It will be fixed in the next update.

3

Thanks Maksim, your solution is the one I implemented, you might want to note somewhere in the docs that slider isn’t bindable (or sync-able, I’m still unclear on the distinction).

I actually simplified my question because there are 7 sliders and 7 counters that need to all be synchronized, so the current solution is a bit verbose.

Ideally some future version of Webix would allow the creation of a single reactive variable which the UI widgets could one-way bind to declaratively (i.e ‘@variable’ ), or equivalent.

Personally I’d advise against two-way binding, btw.

4

that slider isn’t bindable

It is a bug, It will be fixed in Webix 2.3