Bindings don't refresh if bound to an object

3 posts, 0 answers
  1. Maciej
    Maciej avatar
    3 posts
    Member since:
    May 2017

    Posted 14 Jul Link to this post

    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. Maciej
    Maciej avatar
    3 posts
    Member since:
    May 2017

    Posted 14 Jul in reply to Maciej Link to this post

    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 ?

  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 18 Jul Link to this post

    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.
Back to Top