Today every web application is majorly developed with maximum client side scripting because client side programming languages and browser are getting more powerful. JQuery library is majorly used for client side scripting as it provides more flexibility, easy to use and extensibility to work with.
On the top of JQuery, a new library was built which we call as knockout.
I will try to cover all topics of knockout in parts. In this Day 1 article I will be covering basic understanding of knockout.
- What is knockout.js?
- Why Knockout.js?
- Demo example on Observable and Binding
Once you are done with this article go through the Day 2 Link
What is knockout?
Knockout works mainly on MV-VM (Model-View-ViewModel) architectural pattern. When we talk about MV-VM, three components comes into picture.
View – It is your UI or a page in which your data is represented. It can be aspx, html, php, asp. Actual speaking View is an UI which represents the state of an ViewModel.
ViewModel – It is a mediator between the model and View. It aggregates one or more model and helps to convert the model information into View information with the help of binding. Actual speaking ViewModel exposes public properties, methods which then replace the values from Model in the View with the help of declarative binding.
Knockout is mainly represented using KO.
Why use knockout ?
Knockout provides various advantages –
- Automatic refreshing of UI as we can have strong bindings of HTML elements with Model. This can also be terms as dependency tracking.
- Declarative two way binding- A simple and easy syntax to connect your UI with data Model
- Extensible to create custom bindings
- Compatible with all of the latest browsers.
- Easy way of designing client server architecture with minimum lines of codes. No problem of postbacks.
- Creating templates
- No conditional UI refresh required based on Model changes
- Helps in building Single Page Application (SPA)
Let’s start understanding knockout with sample example.
Before starting the code, initial setup is required.
- Download the knockout.js library from below link http://knockoutjs.com/downloads/index.html
- Add js reference in your webpage
- Download the jQuery library from below link http://jquery.com/download/
- Add js reference of jQuery in your page. It is true without jQuery knockout can be executed but still without jQuery library it knockout would be like a handicap.
That’ it we are end with the setup
Let’s take a simple two input type textbox for capturing first name & last name of employee and showing the name in label. See how page looks like :
- Suppose we have a 2 span where we wish to show the FirstName and LastName respectively. Use data-bind attribute to bind the model with the DOM element
- Activate the knockout engine to execute.
Here if I change the value in textbox, same value gets reflected in the span when focus is removed from textbox. This is because span is binded with the model and model is an observable object i.e.- change is observed or tracked.
Suppose you want to see the effect on keydown itelf then set the attribute as
<input type ="text" name="txtFName" data-bind="value: FirstName. valueUpdate='afterkeydown'" />
Here I end up with my first article of Day 1. Today we have learnt a theoretical knowledge about knockout, its framework and tried creating simple example.
In upcoming article, we will go bit deeper and talk regarding
1) Other types of observables
- Dependent Observable
- Observable Array
2) Build-in Bindings
- Binding related to Text and Appearance
- Binding related to Forms elements and events
- Control-Flow binding
Knockout framework is a new era of building web application which provides us the strong binding availability and helps us to keep our code clean. Hope you like this article. Please share your comments whether it’s good or bad. Your input is valuable for me to improve.