Binding a visible parameter to an 'or' statement in Knockout

http://stackoverflow.com/questions/8803484/binding-a-visible-parameter-to-an-or-statement-in-knockout

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>
<input type="checkbox" data-bind="checked: displayDeactive" /> Display Deactive
<hr/>

<ul data-bind="foreach: items">
    <li>
        <input type="checkbox" data-bind="checked: active" />
        <span data-bind="visible: active() || $parent.displayDeactive(), text: name"></span> 
    </li>
</ul>

<hr/>

<ul data-bind="foreach: items">
    <li>
        <input type="checkbox" data-bind="checked: active" />
        <span data-bind="visible: $parent.shouldDisplayItem($data), text: name"></span> 
    </li>
</ul>

CSS

h2 { font-size: 1.2em; }

JavaScript

var Item = function(id, name, active) {
    this.id = id;
    this.name = ko.observable(name);
    this.active = ko.observable(active);
};

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray([new Item(1, "one", true), new Item(2, "two", false)]);
    this.displayDeactive = ko.observable(false);
    this.shouldDisplayItem = function(item) {
        return item.active() || self.displayDeactive();
    }
};
    
ko.applyBindings(new ViewModel());