Knockout Hello World

by joshrivers

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.1.1.js"></script>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

JavaScript

// Here's my data model
var viewModel = { 
    firstName : ko.observable("Planet"),
    lastName : ko.observable("Earth")
};
viewModel.fullName = ko.dependentObservable(function () {
    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
    return viewModel.firstName() + " " + viewModel.lastName(); 
});
 
ko.applyBindings(viewModel); // This makes Knockout get to work