TrendingLatestNews: 2018

KnockOut JS Basics Tutorial for Beginers

Defining computed values

Very often, you'll want to combine or convert multiple observable values to make others. In this example, you might want to define full name as being first name plus space plus last name.
To handle this, Knockout has a concept of computed properties - these are observable (i.e., they notify on change) and they are computed based on the values of other observables.
Add a fullName property to your view model, by adding the following code inside AppViewModel, after firstName and lastName are declared:

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

As you can see, we're passing a callback function to the ko.computed which specifies how it should compute its value. Next, display the fullName value in your UI by adding markup at the bottom of your view:

<p>Full name: <strong data-bind="text: fullName"></strong></p>

If you run the application now and edit the text boxes, you'll see that all UI elements (including the full name display) stay in sync with the underlying data.

How does it work?

Things stay in sync because of automatic dependency tracking: the last  there depends on fullName, which in turn depends on firstName and lastName, and either of those can be altered by editing the textboxes. Any changes ripple out through the object graph causing the minimal set of refreshes needed to bring your viewmodel and visible UI up-to-date.

First name: 
Last name: 

First name: <input data-bind="value: firstName" />
Last name: <input data-bind="value: lastName" />

Full name: 

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
 this.firstName = ko.observable("Westpac");
 this.lastName = ko.observable("IBMTeam");

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

}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Output :

First name: Westpac
Last name: IBMTeam
First name:
Last name:
Full name: Westpac IBMTeam