'visible' binding with arrays issue

36 views
Skip to first unread message

Tomasz Płonka

unread,
Jun 28, 2015, 6:54:23 AM6/28/15
to knock...@googlegroups.com
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'>&nbsp;</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?

Gunnar Liljas

unread,
Jun 28, 2015, 5:37:08 PM6/28/15
to knock...@googlegroups.com
It's an observable, you set the value like this:

place.visible(true);

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Tomasz Płonka

unread,
Jun 29, 2015, 3:00:14 AM6/29/15
to knock...@googlegroups.com
It's a function, got it.
But in this case, to track the value of the 'visible' I need another boolean property, or is there another way? In fact I want to toggle the value of 'visible'.

T.

Gunnar Liljas

unread,
Jun 29, 2015, 3:05:12 AM6/29/15
to knock...@googlegroups.com
place.visible() returns the value 

place.visible(value) sets the value.

So if you want to toggle it:

place.visible(!place.visible())

Tomasz Płonka

unread,
Jun 29, 2015, 3:07:01 AM6/29/15
to knock...@googlegroups.com
Ech, a function, you are right, thank you very much, thinking in c# properties at the moment.
Reply all
Reply to author
Forward
0 new messages