Identify which event caused the control to redraw/recalc (invoked bind function)

[alexmurari]

Hi,

Suppose you have two selects, one for country and other for state, example: select-1: USA and select-2: states of the USA.

When select-1 change it's value, we must update the select-2 with a new list of items (states) and clear the old selected value.

But the in the bind event, I don't have any context about what I should do:

"#select-states": {
    bind: function (d, v, $c) {
       // This was called when the control changed it's own value?
       // Or this was called when "select-country" changed it's value?
       // Or this was called when the "redraw" method was fired (form initialize)?
        
       // if the "select-country" control invoked this event, we should update the states.
       // if the state value just changed, we shouldn't update the select2 list.
       if (country changed) // how to do this?
           $c.select2({ data: states });

       // if the "select-country" value invoked this event, we should set this to null, 
       if (country changed) {
           d.State = null; // The user must select a new value.
       } else
           d.State = v; 
    },
    "watch": "#select-country"
}

Basically, I need I way to tell which event invoked the bind method, so I can respond accordingly.

Looking for when the value parameter is null doesn't work, it doesn't make clear which event invoked the bind function (sometimes null could be a legit value).

Thanks.

Btw, @ermouth, I tested your suggestion of implementation of select2 component (from PR comment), it's working good.

[ermouth]

In general when one control’s init params a) depend on another control’s state, b) init params are frozen after init finishes, you put depending control as an element of a list and make this list rebuild on first control change.

As for select2 there’s a shorter way (never tested it with v4, but it definitely works with 3.5). Something like:

{
    data: {val1:'EN', val2:''},
    Opts: {
      RU:[{id:'Ж', text:'Ж'},{id:'Ю',text:'Ю'},{id:'Щ',text:'Щ'}],
      EN:[{id:'S', text:'S'},{id:'Q', text:'Q'},{id:'Z', text:'Z'}]
    },
    init: 
    	`<div><select id="ctrl1"></select></div>
	<div><select id="ctrl2"></select></div>`,
    ui:{
      '#ctrl1':{
        init: function($o){
          $o.select2({
            data:[
              {id:'RU', text:'Russian'},
              {id:'EN', text:'English'},
            ]
          })
        },
        bind: function(d,v){
          if (v != null && v != d.val1) {
            d.val2 = this.Opts[v][0].text;
            this.my.find('#ctrl2').select2({data:this.Opts[v]});
            d.val1 = v;
          }
          return d.val1;
        }
      },
      '#ctrl2':{
        init: function($o){
          $o.select2({data: this.Opts[this.data.val1] || []})
        },
        bind: 'val2',
        watch:['#ctrl1']
      }
    }
  }

[alexmurari]

@ermouth Thanks for the suggestion, I'll give it a try.

One think that I noticed in select2 v4 is that you can't call $control.select({ data: newData }) multiple times to update the select, you have to either destroy it before recreating it or use a custom adapter that allows the data to be updated.

Destroying it is not a good option because when you do that, the binding between the control and jquerymy is lost.

Thanks again.