Question

I can’t figure out how can I access a value which has been updated by checked binding in the method associated with a click binding?

It seems that checked binding evaluates AFTER click binding, since in click binding method/handler I can’t access computed property value which depends on array synchronized with checked binding.

Template for a single check box:

<script id="singleFilterTemplate" type="text/html">
    <li>
        <input type="checkbox" data-bind="attr: { value: id }, 
                                          click: $root.testMethod,
                                          checked: $parent.selectedFilterIds">
    </li>
</script>

I’ve following hierarchy of view models:

- TopLevelViewModel ($root in template above, defines computed aggregatedSelectedIds property)
---- GroupViewModel_0 ($parent in template above)
-------FilterViewModel_0_0 (Each FilterViewModel is associated with a check box)
-------FilterViewModel_0_N 
---- GroupViewModel_N
-------FilterViewModel_N_0 
-------FilterViewModel_N_N 

• checked: $parent.selectedFilterIds: each time check box has been checked/unchecked – appropriate item in the TopLevelViewModel.selectedFilterIds array is updated
• click: $root.testMethod: whilst click on a check box I’m trying to grab current state of the all check boxes, for this purposes I’ve introduced computed property aggregatedSelectedIds which works well and represent aggregated state for the all GroupViewModel.selectedFilterIds values, basically it aggregates metadata from the all selectedFilterIds properties into a single value and in testMethod() I’m just calling alert(topLevelViewModel.aggregatedSelectedIds()) to ensure that this property represents a list of currently selected filters.

So each time testMethod() called by click binding – I see previous state of the filters (value, computed by the aggregatedSelectedIds). So is there any way to force/push/evaluate checked binding before click binding? I tried event binding but got the same results. Perhaps I’m doing this in wrong way and missed something obvious?

Answer 1

You can subscribe to changes to selectedFilterIds by doing

this.selectedFilterIds  = ko.observable();
this.selectedFilterIds.subscribe(function (value) {
    //Code from your click method goes here
});