ObservableObject data item transform

[Doug]

Hello-

I have an ObservableObject bound to a remote datasource, and the ObservableObject is bound to form fields with MVVM.

I currently have a 1-1 relationship between the field and the form input.  However, I want to change that so there is a single field for multiple controls.  For example...

 

Current

isClient database field (boolean) --> isClient checkbox

isPrimeClient database field (boolean) --> isPrimeClient checkbox

 

Desired

clientType database field (integer) --> isClient checkbox, isPrimeClient checkbox

 

I think I can use binding to the observable's "get" and "set" events...

 

observable.bind("set", function (e) {
if ((e.field === "isClient") || (e.field === "isPrimeClient")) {

   let isClient = observalbe.get("isClient");

   let isPrimeClient = observalbe.get("isPrimeClient");

   //// Some logic to determine appropriate value for clientType /////

   observable.set("clientType",somevalue);

}

});

 

observable.bind("get", function (e) {
if (e.field === "isClient") {

   //Look at clientType integer value and set e.value (for isClient) appropriately.

   let clientType = observable.get("clientType");

   e.value = //// some logic to determine appropriate value ////
}

else if(e.field === "isPrimeClient"){

   //Look at clientType integer value and set e.value (for isPrimeClient) appropriately.
   let clientType = observable.get("clientType");
   e.value = //// some logic to determine appropriate value ////

}
});

However, observable.get(...) always returns null.  Why is that?

Basically what I'm trying to do is take a single field from the back-end and render two controls for it.

[Georgi]

Hello Doug,


In the get event handler the conditions are set for fields that do not exist in the model (e.g. isClient, isPrimeClient), so the code blocks inside them will never execute. You can replace the condition with the following:

observable.bind("get", function (e) {
   if (e.field === "clientType") {
  //logic goes here
   }
});

The same applies when you get the values in the set event handler, since isClient and isPrimeClient are not part of the model, trying to get them will always return null. So you have to get clientType.


Regards,
Georgi
Progress Telerik

[Doug]

Georgi-

Thank you for your response.  That makes sense.  I thought that binding to "get" would add logic to the data pull from source, rather than replace it.  Since it replaces it, for all fields, I would like to have logic in the else that does whatever it would have originally done.  In other words, what goes in the 'else' part?...

observable.bind("get", function (e) {
  if (e.field === "isClient") {
    //do something
  }
  else if (e.field === "isPrimeClient") {
    //do something
  }
  else {
    //do whatever "get" would have done if it wasn't overridden...
  }
}

[Georgi]

Hi Doug,


It is possible to bind a field to multiple controls only in one direction. In other words you can place a condition and bind the controls based on the value of the field as illustrated in the following sample:

• http://dojo.telerik.com/ejeGuG/8

However it is not possible to bind the control to the field when the value of the control changes, since it is bound to a conditional expression.


Regards,
Georgi
Progress Telerik

[Doug]

Thanks for the example of the one way data binding of the observable value using an expression.

 

Do you know what code would go in the section "//do whatever "get" would have done if it wasn't overridden..."?

In other words, if the getter wasn't overridden, and it made a call to the database to get the value (for all fields other than IsClient and IsPrimeClient), what code would go there?  Basically, what is the source code for the normal get operation?

[Georgi]

Hello Doug,

I assembled dojo sample which illustrates how to bind single field in the model to multiple controls:

• http://dojo.telerik.com/ejeGuG/14

It works as follows:

1. When clientType is 0, none of the checkboxes is checked.
2. When clientType is 1, first checkbox is checked.
3. When clientType is 2, second checkbox is checked.
4. When clientType is 3, both checkboxes are checked.

Also get is an event which is fired when when the get method is called, so if you do not attach an event handler to the get event, no code will be executed - it does not have default behavior.


Regards,
Georgi
Progress Telerik