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

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

4 Answers 264 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Paul Wood
Top achievements
Rank 1
Paul Wood asked on 03 Apr 2017, 05:55 AM

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>

4 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 04 Apr 2017, 02:46 PM
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.
0
Paul Wood
Top achievements
Rank 1
answered on 05 Apr 2017, 12:06 AM

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.

0
Veselin Tsvetanov
Telerik team
answered on 06 Apr 2017, 02:33 PM
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.
0
Veselin Tsvetanov
Telerik team
answered on 11 May 2017, 01:55 PM
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.
Tags
MVVM
Asked by
Paul Wood
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Paul Wood
Top achievements
Rank 1
Share this question
or