How to do data binding with multiple level of functions calls ?

[Pascal]

We are trying to do data binding with multiple levels of function calls in order to tidy our base model (not having all of our functions related to some requirements in our model root's)

So let says our model is as following (expressed in typescript for clarity) :

class MyModel extends kendo.data.ObservableObject {
    EnabledDate() { return false; }
}

and we have a the data-binding expressed as following :

<div data-role="datepicker" data-bind="enabled:EnabledDate"></div>

or (with parentheses)

<div data-role="datepicker" data-bind="enabled:EnabledDate()"></div>
Ok -> These both works perfectly, as expected the datepicker is disabled !

( But please note, strangely :

<div data-role="datepicker" data-bind="enabled:UnexistingEnabledDate()"></div>
 --> generate an error : TypeError: d.UnexistingEnabledDate is not a function

while

<div data-role="datepicker" data-bind="enabled:UnexistingEnabledDate"></div>
--> gives no error, but the widget is not disabled !
)


Now, if we want to tidy our model and group "Enabled/Disabled" in a specialized class, let say :

class MySpecializedModel extends kendo.data.ObservableObject {
    EnabledDate() { return false; }
}
our model becomes :

class MyModel extends kendo.data.ObservableObject {
    private _specializedInstance: MySpecializedModel;

    GetSpecializedInstance():MySpecializedModel {
         if (this._specializedInstance == undefined) {
             this._specializedInstance = new MySpecializedModel();   
         }
         return this._specializedInstance;
    }
}

and our data-bind attribute in markup has to be modified, but we can't find a working way of accessing EnabledDate via GetSpecializedInstance.

We tried the following :
<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance.EnabledDate"></div>
--> no javascript errors, but the binding is not working (widget not disabled as expected)
<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance().EnabledDate"></div>
--> TypeError: e.bind is not a function
<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance().EnabledDate()"></div>
--> no javascript errors and correctly binded, but infinite loop (too much recursion) occurs later on, while it does not occur with the "EnabledDate" working binding scheme

<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance.EnabledDate()"></div>
--> TypeError: (intermediate value).EnabledDate is not a function

We also tried accessing SpecializedInstance as a getter property instead of a function by modifying MyModel class with the following code :
class MyModel extends kendo.data.ObservableObject {
    private _specializedInstance: MySpecializedModel;

    get SpecializedInstance(): MySpecializedModel{
        if (this._specializedInstance == undefined) {
             this._specializedInstance = new MySpecializedModel();  
         }
         return this._specializedInstance;
    };
    set SpecializedInstance(value: MySpecializedModel) {
        this._specializedInstance= value;
    };
}

and the following markup gave the following errors :
<div data-role="datepicker" data-bind="enabled:SpecializedInstance.EnabledDate"></div>
--> TypeError: e.bind is not a function

<div data-role="datepicker" data-bind="enabled:SpecializedInstance().EnabledDate"></div>

--> TypeError: d.SpecializedInstance is not a function

<div data-role="datepicker" data-bind="enabled:SpecializedInstance().EnabledDate()"></div>
--> TypeError: d.SpecializedInstance is not a function

<div data-role="datepicker" data-bind="enabled:SpecializedInstance.EnabledDate()"></div>

--> no javascript errors and correctly binded, but infinite loop (too much recursion) occurs later on, while it does not occur with the "EnabledDate" working binding scheme


So, what is the correct syntax when binding with such multiple functions calls level ?

Thanks for your support !

We are trying to do data binding with multiple levels of function calls in order to tidy our base model (not having all of our functions related to some requirements in our model root's)

 

So let says our model is as following (expressed in typescript for clarity) :

 

class MyModel extends kendo.data.ObservableObject {
   EnabledDate() { return false; }

 

and we have a the data-binding expressed as following :

<div data-role="datepicker" data-bind="enabled:EnabledDate"></div>

 

or (with parentheses)

<div data-role="datepicker" data-bind="enabled:EnabledDate()"></div>

Ok -> These both works perfectly, as expected the datepicker is disabled !

 

( But please note, strangely :

<div data-role="datepicker" data-bind="enabled:UnexistingEnabledDate()"></div>

 --> generate an error : TypeError: d.UnexistingEnabledDate is not a function

while

<div data-role="datepicker" data-bind="enabled:UnexistingEnabledDate"></div>

--> gives no error, but the widget is not disabled !

)

Now, if we want to tidy our model and group "Enabled/Disabled" in a specialized class, let say :

class MySpecializedModel extends kendo.data.ObservableObject {
    EnabledDate() { return false; }
}

our model becomes :

class MyModel extends kendo.data.ObservableObject {
    private _specializedInstance: MySpecializedModel;

    GetSpecializedInstance():MySpecializedModel {
         if (this._specializedInstance == undefined) {
             this._specializedInstance = new MySpecializedModel();
         }
         return this._specializedInstance;
    }
}

 

and our data-bind attribute in markup has to be modified, but we can't find a working way of accessing EnabledDate via GetSpecializedInstance.

 

We tried the following :

<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance.EnabledDate"></div>

--> no javascript errors, but the binding is not working (widget not disabled as expected)

<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance().EnabledDate"></div>

--> TypeError: e.bind is not a function

<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance().EnabledDate()"></div>

--> no javascript errors and correctly binded, but infinite loop (too much recursion) occurs later on, while it does not occur with the "EnabledDate" working binding scheme

<div data-role="datepicker" data-bind="enabled:GetSpecializedInstance.EnabledDate()"></div>

--> TypeError: (intermediate value).EnabledDate is not a function

 

We also tried accessing SpecializedInstance as a getter property instead of a function by modifying MyModel class with the following code :

class MyModel extends kendo.data.ObservableObject {
    private _specializedInstance: MySpecializedModel;

   get SpecializedInstance(): MySpecializedModel{
        if (this._specializedInstance == undefined) {
             this._specializedInstance = new MySpecializedModel();
         }
         return this._specializedInstance;
    };
    set SpecializedInstance(value: MySpecializedModel) {
        this._specializedInstance= value;
    };
}

 

and the following markup gave the following errors :

<div data-role="datepicker" data-bind="enabled:SpecializedInstance.EnabledDate"></div>

--> TypeError: e.bind is not a function

<div data-role="datepicker" data-bind="enabled:SpecializedInstance().EnabledDate"></div>

--> TypeError: d.SpecializedInstance is not a function

<div data-role="datepicker" data-bind="enabled:SpecializedInstance().EnabledDate()"></div>

--> TypeError: d.SpecializedInstance is not a function

<div data-role="datepicker" data-bind="enabled:SpecializedInstance.EnabledDate()"></div>

--> no javascript errors and correctly binded, but infinite loop (too much recursion) occurs later on, while it does not occur with the "EnabledDate" working binding scheme

 

So, what is the correct syntax when binding with such multiple functions calls level ?

Thanks for your support !

[Pascal]

Woops, formatting went wrong in my question.
I forgot to mention we are using kendoui v2017.1.118 and jquery 1.9.1 !

[Ianko]

Hello Pascal,

I am not sure why do you need an ObservableObject with an inner Object that extends the ObservableObject as well. This might be the reason for getting recursions and errors. 

Basically, if there is a conceptual difference in the views that needs the view-models to be in different classes you should rather use different ObservableObject instances and not nesting them in a single instance to be used later. 

If, the logic implemented, however, interacts with the models between them, maybe, it would be a better decision to merge them in a single ObservableObject instance, which will make the implementation much more manageable. 

And finally, if the case is that you need plain Classes to be used in the ObservableObject instance, then I would suggest you not to extend them using the ObservableObject class, but have a single ObservableObject instance with properties pointing to plain object classes. Here you are a simple demonstration for that case: https://jsbin.com/sateyuseye/edit?html,js,output

If you have any further questions or difficulties, please update the linked JsBin and share the link here so that I can properly examine what the case and whether I can be and further helpful. 

Regards,
Ianko
Telerik by Progress