Introduction
This chapter demonstrates about the Knockout.js Tutorial. Knockout is a JavaScript library which helps us to create rich, responsive and interactive user interfaces with a data model of an application and following are the concepts are covered in this chapter.
- About Knockout.js
- MVVM Model
Description
Knockout.js is a javascript which helps us to create user interfaces with a data model of an application. it has a declarative binding which allows us to bind HTML elements of UI to any data model in a simple and convenient way.
Which works particularly well with the MVVM Patterns, offering declarative bindings somewhat like Silverlight but without the browser plugin. Unlike jQuery which is mostly for animation and event handling, Knockout.js focused only designing only scalable and data-driven UI.
KO Main Features
Additional Benefits
KO is Pure Javascript Library. It can be added on top of existing web application. It's very compact and is around 13kb after zipping. Which can work in any mainstream browsers like IE6+, FireFox2+, Chrome, Safari etc.
- Declarative Binding A simple and convenient way to connect parts of UI with the data model.
- Dependency Tracking It automatically updates the UI when the data model changes.
- Trivially extensible Implement custom behavior as new declarative bindings for easy reuse in just a few lines of code.
Description
MVVM is known as Model-View-ViewModel it,s an architectural pattern developed by Microsoft originally for WPF and Silverlight Applications The pattern is derived from the Model-View-Controller pattern The image below shows the Model-View-ViewModel as shown below.
Model
Which is responsible for managing a state of the application in objects. Which also comprises of business logic which operates in the state. Also, it has the Data access layer responsible for persisting and fetching Model objects.
View
It's an application user interface which defines the appearance of UI using different elements and control like the textbook, buttons, combo box, image, etc. When using KO user views simply on HTML Document with declarative bindings to link to the view model.
ViewModel
Its the one which binds Model and View together which retrieves the data from the model (M) and exposes it to the view (v) as properties in a form that the view can easily consume. Note that which cannot the UI itself: it doesn't have any concepts of buttons or display styles. In KO, View models are pure JavaScript Objects that hold no knowledge of HTML.
Download and Install
A user can download the Knockout.js library from the official site of Knockout.js which is shown in the below image.
A user needs to update the src location with the installed location. The user can also refer the Knockout.js library from CDNs.
A user can refer Knockout.js library from Microsoft Ajax CDN like as shown in the below snippet.
[code]
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
[/code]
In an another way, a user can also refer minified version of the knockout.js library from CDNJS as shown in below snippet.
[code]
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script>
[/code]
The image below demonstrates the what's happening in the Knockout.js and MVVM model works as shown.
Example
Knockout.js mainly based on the Model-View-ViewModel The below example demonstrates the Knockout.js which contain two strings and one derived string whenever the string get updated then the derived string also updated by automatically by KO there is no need of extra code for these oprations which is shown below.
[html]
<html>
<head>
<title></title>
<script src="knockout-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<div class='liveExample'>
<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>
</div>
</body>
<script>
var ViewModel = function (first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.computed(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("Antony", "Tony")); // This makes Knockout get to work
</script>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
If user modifying the string the derived string automatically get updated as shown in below image.
Key Points
- Knockout.js is a pure JavaScript library and work with any web framework.
- Knockout.js library file is very small and light weight around 13kb after zipping.
- Knockout.js is a open source and free for use.
- All mainstream browsers are supported by Knockout.js.