Say Your Name With Knockout.js

Here Am Going To Use A New JavaScript Frame Work Called  Knockout.js

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.

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("Hudhaifa", "Yoosuf"));

// This makes Knockout get to work










Try This In JS Fiddle : Click Me