I have some JSON data returned from Ajax call that I first equip with the additional 'visible' field:
for (var index = 0; index < data.length; ++index) {
data[index].visible = ko.observable(false);
Later on, I construct my model:
model = {
jsonData: ko.observableArray(data),
clickClick: function (place) {
place.visible = true;
}
};
that is bound to the following:
<div id="map" class="map">
<!-- ko foreach: jsonData -->
<div class="marker" data-bind="attr: {'id': 'woeid' + $index()}">
<div>
<span data-bind="text: $data.name, click: $parent.clickClick"></span> (<span data-bind="text: $data.place_type"></span>): <span data-bind='text: $data.trends.length'> </span> trends
</div>
<ul data-bind="foreach: $data.trends, visible: $data.visible()">
<li>
<span data-bind="text: $data"></span>
</li>
</ul>
</div>
<!-- /ko -->
According to the initial value of the 'visible' field, lists are displayed or not, that's fine. However, clickClick() method changes the 'visible' field properly, but GUI is not updated. What am I doing wrongly?