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

[Paul Wood]

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>

[Veselin Tsvetanov]

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

[Paul Wood]

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.

[Veselin Tsvetanov]

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

[Veselin Tsvetanov]

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