KnockoutJS Application Structure

Developers mostly use KnockoutJS when they are working on single page applications. It helps you reduce server round trips because you have single page website that has the ability to retrieve all the dynamic data users need.
KnockoutJS makes it very for users to bind domain data with HTML because it is a server side JavaScript library. It implements a specific function commonly known as “Model-View-ViewModel (MVVM). The special features of this framework are the Observables attribute which keeps all the data synced. This article explains knockoutJS application structure.

View:

View is the first element of the KnockoutJS. It is actually a user interface you create using HTML and CSS.
This framework also helps you bind data model to HTML DOM elements. Its unique data-bind concept offers 2 different ways to bind data between View and ViewModel. This simply means that the data model reflects all the changes made in User Interface and vice versa. You can also create self-updating User Interfaces using this framework.

ViewModel:

It is nothing more than a JavaScript object. It represents data with the help of necessary functions and properties it contains. Knockout JavaScript uses HTML’s data-bind concept to combine both View and ViewModel. It helps change HTML without disturbing ViewModel. The framework uses Observables to control automatic data refresh between ViewModel and HTML.

The framework bonds data model to HTML DOM elements to synchronize data. Firstly, it uses the data-bind concept to sync data followed by using Observables to refresh both these components. The synchronization of data makes dependency tracking automatic without the need of any extra coding. You can directly connect the underlying data with your display as well.
For behaviors specific to different application, you can also create your own custom bindings. This enables you to transfer all the data to HTML the way you want.

Model:

It is simply data available on serve related to the application domain. KnockoutJS helps you manipulate this data by sending and receiving requests from ViewModel.
There are many types of permanent storages such as cookies and database where you can store the data. This framework has nothing to do with the type of storage. It is up to you to create communication channel between the KnockoutJS and the data. Mostly, you will load data using Ajax call. In this article we studied knockoutJS application structure, in the next article we shall see MVVM architecture in detail.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .