Basic Knockout Example

by mrrodd

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js"></script>
<label for="fname">First Name:</label>
<input id="fname" data-bind="value: firstName" />
<br/>
<label for="lname">Last Name:</label>
<input id="lname" data-bind="value: lastName" />
<br/>
Full Name: <span id="fullname" data-bind="text: fullName"/>

JavaScript

var ViewModel = {
    firstName: ko.observable("John"),
    lastName: ko.observable("Papa")
};

ViewModel.fullName = ko.dependentObservable(function () { 
    return this.firstName() + " " + this.lastName();
}, ViewModel);

ko.applyBindings(ViewModel);