This is a migrated thread and some comments may be shown as answers.

Bindings don't refresh if bound to an object

2 Answers 414 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Maciej
Top achievements
Rank 1
Maciej asked on 14 Jul 2017, 05:42 PM

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 ?

2 Answers, 1 is accepted

Sort by
0
Maciej
Top achievements
Rank 1
answered on 14 Jul 2017, 06:08 PM

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 ?

0
Veselin Tsvetanov
Telerik team
answered on 18 Jul 2017, 09:03 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
MVVM
Asked by
Maciej
Top achievements
Rank 1
Answers by
Maciej
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or