Computed Observables

Previously referred to as dependent observables prior to 2.1

by Randy Crews

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
Name:<input data-bind="value: name, valueUpdate: 'afterkeydown'"/>
<input type="checkbox" data-bind="checked: nameVisible"/>
<p>
    My name is: <span data-bind="text: name, visible: nameVisible" ></span>
    <br/>
    <span data-bind="text: displayName" />
</p>
<button data-bind="click: changeName">Update Name</button>

JavaScript

$(function() {
    var viewModel = {
        name: ko.observable("randy"),
        changeName: function() {
            this.name("Abbey");
        },
        nameVisible: ko.observable(true)
    };
    viewModel.displayName = ko.dependentObservable(function(){
        return this.name() + " is" + (!this.nameVisible() ? " not" : "") + " visible.";}, viewModel);
    ko.applyBindings(viewModel);
});