Calculated property on child with parent() doesn't update

5 posts, 0 answers
  1. Paul Wood
    Paul Wood avatar
    51 posts
    Member since:
    Apr 2008

    Posted 03 Apr 2017 Link to this post

    Im having an issue where I am trying to create a calculated property on a child object in the observable view model where its value is dependant on a property on the parent and the calculated value is not updating when the parent gets updated.

     

    Please help, Im quite confused

    Here is the code and a fiddle of it

    https://jsfiddle.net/80mo1ch7/

    <script>
        var viewModel = null;
     
        $(document).ready(function () {
            viewModel = kendo.observable({
                parentNumber: 1,
                child: { showLink: function () { return this.get('parent().parentNumber') == 2 } }
            });
     
            kendo.bind($('#simpleTest'), viewModel);
     
            document.getElementById('changeValue').onclick = function () {
                if (viewModel.parentNumber == 1)
                    viewModel.set('parentNumber', 2);
                else
                    viewModel.set('parentNumber', 1);
            }
        });
    </script>
     
    <section id="simpleTest">
        <p data-bind="text: parentNumber"></p>
        <section data-template="simpleTestChildTemplate" data-bind="source: child" />
    </section>
     
    <script id="simpleTestChildTemplate" type="text/x-kendo-template">
        <section>
            <button id="changeValue">Change</button>
            <a data-template="headerTemplate" data-bind="visible: showLink">BlahBlah</a>
        </section>
    </script>
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 04 Apr 2017 Link to this post

    Hello Paul,

    Here you will find a modified version of the sample sent. You will notice, that the property gets updated accordingly, when the value changes.

    The key point is to move the click handler implementation within the ViewModel itself, so you could change the value in the following way:
    buttonClick: function() {
     if (viewModel.parentNumber == 1) {
        this.set('parent().parentNumber', 2);
      } else {
        this.set('parent().parentNumber', 1);
      }
    }

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    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.
  3. Paul Wood
    Paul Wood avatar
    51 posts
    Member since:
    Apr 2008

    Posted 04 Apr 2017 Link to this post

    Thanks Veselin,

    Do you know why this is the case? Is there some reason I am unaware of? (just for knowledge sake)

    You already have the calculated field in the view Model so the dependancy (from showLink function to the parentNumber) should be there.

    And it would seem logical to think that any "viewModel.set()" of the parentNumber would fire the dependancies to update.

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 06 Apr 2017 Link to this post

    Hi Paul,

    The reason for the observed difference is the fact, that the set() method needs to be executed on the this object and not он the viewModel. Here you will find a modified sample, that triggers internally the set() on the viewModel and it also does not update the dependency accordingly:
    buttonClick: function() {
      if (viewModel.parentNumber == 1) {
        viewModel.set('parentNumber', 2);
      } else {
        viewModel.set('parentNumber', 1);
      }
    }

    We will need a bit more time to further troubleshoot this scenario and isolate the cause for the observed behaviour. As soon as I know more on this matter, I will come back to you.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    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.
  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 11 May 2017 Link to this post

    Hello Paul,

    Thank you for your patience.

    After a careful review of the case, we managed to isolate the cause for the difference in the behaviour of the observable object. There are the following two implementation details that have influence on this case:

    - First, the change listeners are attached by using the name of the field, which is being used. Therefore, in order to re-evaluate the function, the observable will look for a change using the set() method on a property with name "parent().parentNumber". When using the ​set() ​with ​parentNumber, the model does not know that it should reevaluate the showLink() function;

    - Second, the changes on the parent object (caused using viewModel.set()), will not go down to notify any children. Therefore, the following sample would also not work as intended; 

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    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