Boolean property not triggering dependent observable trigger
I have an array of "Option" objects. Each "Option" contains a "Name", "Description" and a "Selected" boolean field to indicate whether its been selected. I've created a template to render the Options and the page outputs fine with everything in place.
However, the trigger I created that should catch the change of state of the "Selected" field doesnt seem to work. The "ajaxTrigger" dependent observable should trigger a call to the server if the options array changes in any way but this doesnt seem to be the case.
Can anyone see where I'm going wrong?
JSON Data:
{
"Name": "Add Helicopter Excursion",
"Description": "Enjoy a holiday excursion",
"Code": "HEL",
"Selected": false
}, {
"Name": "Add Scuba Diving",
"Description": "Go on a scuba diving trip",
"Code": "SCU",
"Selected": false
}
View Model:
var viewModel开发者_开发问答 = {
// other view model properties removed for this example
options: ko.observableArray(@(Html.Raw(Json.Encode(Model.Options))))
}
viewModel.ajaxTrigger = ko.dependentObservable(function() {
// other triggers removed for this example
this.options();
GetPrices();
}, viewModel);
Template:
<script id="OptionsTemplate" type="text/x-jQuery-tmpl">
<li>
<input type="checkbox" data-bind="checked: Selected" />
<span data-bind="text: Name"> </span> <span data-bind="text: Description"> </span>
</li>
</script>
UI:
<ul data-bind='template: {name: "OptionsTemplate", foreach: options}'></ul>
observableArrays only notify on changes to the array itself (items added/removed, array replaced entirely). It will not trigger on changes to observables on the individual items. If you wanted the dependentObservbale to trigger, then you would need to make Selected
an observable and make sure that you access each item's Selected
value in your dependentObservable.
精彩评论