KnockoutJS: Build Dynamic Client Side Application
KnockoutJS: Build Dynamic Client Side Application
About Knockout.js
KnockoutJS is a JavaScript library that allows you to create dynamic and rich web applications. It makes it very simple to enact a complicated UI that responds to user interactions. It offers observables to sync UI with its data model along with set of declarative bindings. KnockoutJS is built with the Model-View-View-Model (MVVM) pattern. Knockout uses three things for implementation
- View, that contains HTML and CSS elements that get data-bound to it.
- ViewModel, contains the data to bind to the view.
- Binding, data to the view with the ViewModel
Data Binding Syntax
In knockout, we can bind data using an HTML attribute called data-bind to any HTML element that you want Knockout to replace with information from your viewModel. There are two approaches to this: Knockout allows you to specify data bindings with HTML comments Ex:
<!-- ko --> <!-- /ko -->
If you want to wrap your binding around a block of HTML code then binding through HTML comments is extremely convenient.
- It also allows us to dynamically display data(text or HTML) based on data present within a viewModel. Ex.
<body> <h1> Hello <span data-bind="text: fullname"></span></h1> <script> var viewModel = function() { this.fullname = 'Mark Watney'; }; ko.applyBindings(viewModel); </script> </body>When you will executed this snippet, it will write Hello Mark Watney inside an h1 tag. A span tag is data-bound to the fullname property of the viewModel. This is done by placing text: fullname inside the data-bind HTML attribute.
ViewModel
A view model is a pure-code representation of the data and operations on a UI. One of the most important thing that knockout uses is viewModel. In the above example, it is named as viewModel that contains only a single variable name. Ex: If you’re implementing a personal details form, your view model would be an object holding all your details, and exposing methods to add and remove them. You just need to declare any JavaScript object to add a viewModel in Knockout:
var personalDetailsViewModel = {
name: 'Mark',
lastname:'Watney',
age: 23,
email:'mark@gmail.in',
address:'34-xyz,Pune'
};
Telling knockout to bind data
Now the most important thing is tell the knockout to bind the data on the view to the viewModel. For this you need to call ko.applyBindings function with a View‐Model.
ko.applyBindings(personalDetailsViewModel);
Observables
Till now we have studied how to create a viewmodel and how to its properties through data binding. One of the key benefits of Knockout is that it update our UI automatically when there is some change in viewmodel. To do this, we need to declare our model properties as observables which can automatically detect dependencies. Ex:
var myViewModel = {
Name: ko.observable('Mark Watney'),
Age: ko.observable(50)
};
Reading and Writing observables
For reading the observable’s value, you need to call the observable with no argument. In this example, myViewModel.Name() will return ‘Mark Watney’, and myViewModel.Age() will return 50. And for writing a new value to the observable, call the observable and pass a new value as a argument. On calling myViewModel.Name(‘John’), it will change the name value to ‘John’. You don’t have to change the view at all – the same data-bind syntax will keep working. The difference is that our code can detect changes now and it will update the view automatically.
ObservableArray
When you need to find and react to changes of a collection of things, you can use an observableArray. This is useful if you use tables where elements of the tables are dynamically added and removed. It will also be used to display or edit multiple values.
var anotherObservableArray = ko.observableArray([
{ name: "Zuck", age: 25 },
{ name: "Bailey", age: 56 },
{ name: "Codey", age: 19 }
]);
Or,
var anotherObservableArray = ko.observableArray(); //It’s an empty array
anotherObservableArray.push('Some value');
Reading information from the ObservableArray:
Length of the array: myObservableArray().length; 0th element of the array: myObservableArray().[0];
This is a simple overview of ‘How to get started with building dynamic application mainly for client side’. Using these basic features of Knockout.js, you can develop a dynamic client-side application with much ease.
Also, we are happy to share that Tudip is recognized as Top E-commerce Software Development Companies on Software Development Company.