Question

I’m trying to show/hide items within a collection using a jQueryUI slider.

The slider returns values 1 to 10 and I want to show the item if the item’s “win” property is higher than the slider’s value and vice versa.

I’ve got so far:

http://jsfiddle.net/FloatLeft/uqv7D/

I was hoping that this code would set the item’s visibility

ko.utils.arrayForEach(viewModel.euroTeams, function(team) {
    team.win = ko.observable(team.win);
    team.lose = ko.observable(team.lose);
    team.showTeam = team.win() > viewModel.wins();   
});

Template:

<div class="team" data-bind="visible: showTeam"></div>

Answer 1

You need to create a computed observable so that the value of showTeam will update as well.

Here is a reference on the subject: http://knockoutjs.com/documentation/computedObservables.html

I’ve updated your fiddle: http://jsfiddle.net/uqv7D/17/

As per freakish’s suggestion, I am pasting the code below so there’s no reliance on external sources:

ko.utils.arrayForEach(viewModel.euroTeams, function(team) {
    team.win = ko.observable(team.win);
    team.lose = ko.observable(team.lose);
    team.showTeam = ko.computed(function() {
        return team.win() > viewModel.wins();
    }, this);
});