Hello World example

In this example, the two text boxes are bound to observable variables on a data model. The “full name” display is bound to a computed observable, whose value is calculated in terms of the observables.

Edit either text box to see the “full name” display update. See the HTML source code and notice there’s no need to catch “onchange” events. Knockout knows when to update the UI.

Live example

Source code: View

<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>

Source code: View model

    // Here's my data model
    var ViewModel = function(first, last) {
        this.firstName = ko.observable(first);
        this.lastName = ko.observable(last);

        this.fullName = ko.pureComputed(function() {
            // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
            return this.firstName() + " " + this.lastName();
        }, this);
    };

    ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

Try it in jsFiddle