In short, Knockout.js (also known as KO) is a very useful JavaScript library and the use of Knockout.js is increasing every day. The Knockout.js library is helpful for creating interactive and responsive web applications. Knockout.js very powerful in the context of dynamic UI creation. Knockout.js is developed and maintained as open-source by Steve Sanderson. Steve Sanderson is a Microsoft employee. Anytime we have sections of UI that updates dynamically, KO can help us to implement it easier and more maintainably.
![]()
Figure 1: Knockout.js
Features of Knockout.js
- Declarative bindings
Declarative bindings is a simple and effective way to connect parts of our UI to the data model. We can construct a complex dynamic UI easily using nested binding contexts. With declarative binding we can change the DOM and all the bound pieces remain connected. In the Declarative Bindings we can bind data to the DOM by inserting the data-bind attribute into a DOM element. The main use of Knockout.js is for designing a scalable and data-driven User Interface.
- Elegant dependency tracking
Elegant dependency tracking provides automatic updates of the right parts of your UI whenever the data model changes.
- Trivially extensible
Trivially extensible provides the custom behaviors for the new declarative bindings for easy reuse in just a few lines of Knockout.js code.
Benefits of Knockout.js
- Knockout.js is very compact because it takes around 13kb after compressing.
- Another benefit of Knockout.js is, it works on any mainstream browser like Safari and Chrome.
- Knockout.js is a pure JavaScript library that works with any server-side or client-side technology.
Downloading and Installing Knockout.js
Knockout.js is pure JavaScript so its does not depend on any other libraries. So if you want to work in the Knockout.js then you need to download the latest version of Knockout JavaScript file from the download page.
Reference the file using the <script> tag somewhere on your HTML pages.
Example
- <script type="text/javascipt' src='knockout-2.js'></script>
Now we can use the Knockout.js .
MVVM and View Model in Knockout.js
Model-View View Model (MVVM) basically is a design pattern for building a User Interface. MVVM describes how to maintain a sophisticated UI simply by splitttng the three parts:
![]()
Figure 2: MVVM
- Model
In the applications we stored the data and the data provides the operations and objects in the business domain. Let's see an example of bank accounts that can do the money transfers so the Model is independent of any UI. When we use KO we actually make the AJAX call to some server-side code to read and write that stored model data. Basically MVVM is the implementation of the application's domain model that contains the data model with the validation and business. The examples of the Model is a data transfer object and plain old CLR objects (POCOS).
View
The main use of the View is for designing the structure, layout and appearance of what the user sees on the screen. Basically the View is defined with XAML. In a Window Phone application, the View is a page in the applications and the View could be a sub-component of a parent view. A View has its own model, the view gathers the data from the view model using some binding, or invoking the functions on the view model. There are various methods for executing the code on the view model for the response to the interaction on the view, like clicking the button or item selection. If a view model does not have arguments, then the view model can be instantiated in the view as the view's Data Context.
- View Model
View Model provides the intermediation between the view and the model and it is also responsible for handling the view logics. The View Model gathers the data from the model and then prepares that data to the View. The View Model is also responsible for defining the logical state change that affects some aspect of the display in the view.
Benefits of MVVM
- Using MVVM it is easy to redesign the UI of an application without changing the code because the View is implemented entirely in the XAML. The new version of the view works with the existing view model.
- When the developer does the development, in the development process developers and designers can work independently and concurrently on their components. Designers can get easily generated sample data to work, while the developers can work on the view model and model components.
- Developers can perform the units tests for the view model and the model without the use of the view. A unit test for the view model can done and the exercise is exactly the same functionality as is used by the view.
Summary
This article explained the basics of Knockout.js, the benefits of Knockout.js, MVVM, the View Model in Knockout.js and the benefits of MVVM.
I hope this article will be helpful for beginners, if they start working in the Knockout.js.