In ViewModel binds value with another

[Marco]

I'm using Kendo JQuery with MVVM.

I would like to automatically change the value of the a variable ("label") when another variable changes ("optionId").

This is my VieModel:

  var vm = kendo.observable({
    optionId: '',
    label: ( this.optionId == 'Spaghetti' ? "Pasta selected" : "Animal selected" ),

    setOption: function( event ) {

      var value = event.currentTarget.value;

      this.set("optionId", value );
      //this.set("label", this.optionId == 'Spaghetti' ? "Pasta selected" : "Animal" );

    }
  });

If I remove the commented line, it works. But that's not what I want because I would have to add that line in every method.

I thought I could write:

label: ( this.get("optionId") == etc... )

but I can't. I believe this would work.

Here is an example on Kendo Dojo. Here:

https://dojo.telerik.com/agewIWAk

Any idea?
Many thanks.

[Neli]

Hi Marco,

I would suggest you use the approach described in the Setting Values of dependent Properties section linked below and use a function for the label:

- https://docs.telerik.com/kendo-ui/framework/mvvm/observableobject#setting-values-of-dependent-properties

I modified the provided example with the following implementation:

 label: function() {  
          var val = ''
          if (this.get("optionId") != ''){
               val = this.get("optionId") + " selected"
          }
          return val;
},

Here you will find the modified Dojo example. 

I hope the provided suggestion will suit your scenario.

Regards,
Neli
Progress Telerik

[Marco]

Hello Neli!

it was exactly what I needed.

Many thanks! ❤