Knockout Computed Example

by joshjs

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js"></script>
<div>
    First Name: <input data-bind="value: firstName" />
</div>
<div>
    Last Name: <input data-bind="value: lastName" />
</div>
<div>
    Full Name: <span data-bind="text: fullName"></span>
</div>

JavaScript

function ViewModel(firstName, lastName) {
    var self = this;
    self.firstName = new ko.observable(firstName);
    self.lastName = new ko.observable(lastName);
    
    self.fullName = new ko.computed(function() {
        return self.lastName() + ", " + self.firstName();
    });
}

var vm = new ViewModel("Josh", "Schultz");

ko.applyBindings(vm);