Bindings don't refresh if bound to an object

[Maciej]

First, please take a look at this simple example

<div id="view">
    <span data-bind="text: obj"></span>
    <input data-bind="value: obj.name" />
  </div>
  <script>
    $(document).ready(()=> {
      let model = kendo.observable({
          obj: {
            name: "John",
            value: 15,
            toString:function(){return JSON.stringify(this);}
          }});

      kendo.bind($("#view"), model);
    });
  </script>

 

When html is loaded everything is fine but when field 'name' is changing, refresh is not triggered for the span. How do I trigger it ?

[Maciej]

I don't see edit option so I'm replying.

I was able to achieve what I want by subscribing to nested observable change event and trigerring parent's change event. Is there a more built-in/out of the box way of propagating change ?

[Veselin Tsvetanov]

Hi Maciej,

The Kendo MVVM registers the methods / fields that needs to be updated based on the usage of the observable.get() method. Therefore, to make the observable know, that it has to reevaluate its toString() method, the method itself should retrieve the fields values using the get():

toString: function(){
  return '{"name":"' + this.get('name') + '","value":' + this.get('value') + '}';
}

Moreover, in the text data-bind, the method should be used directly, instead of simply pointing to the object as a whole:

<span data-bind="text: obj.toString"></span>

This way the framework will know, that it should reevaluate the toString() method each time the name or the value fields are changed. Also, it knows where in the view this method points to.

Regards,
Veselin Tsvetanov
Progress Telerik