Model: It is responsible for holding application data which represents objects and is independent of any UI.
ViewModel: It is the connector of model and view which represents the data and operations on UI and hold functions also. It is mainly responsible for coordination between model and view. For this, data binding concept is applicable because when UI changes then model changes and vice versa.
View: It is the representation of UI according to the model data. It provides the layout of User Interface and represent to the user.
Knockout.JS provides a convenient and simple endeavor to manage complex, data-driven interfaces. Instead of manually tracking, knockout will automatically update the DOM according to the changes done in the data model.
Dependency tracking: This keeps the tracking of dependencies. It automatically updates the specific part of UI when there’s any change in data model. There are three objects that make this feature: observables, computed observables, and the dependency-detection module. Dependency tracking is achieved by two-way bindings and special type of variable called observables.
Declarative two-way bindings: A simple way to connect parts of your UI to data-model. If you change the DOM then all element of bound stays connected. You can bind data to DOM by including attribute of data binding for any element of DOM.
Templating: Template is a set made up of DOM elements, so it can be repetitively used. By templating we can easily develop applications that are complex due to its property of minimizing duplication of DOM elements. There are two ways of using templates:
Native templating: Knockout has built-in templates like foreach, with, if, and other that supports control flow. These binding capture the HTML markups in your element, and use it as a template to render against an arbitrary data item.
String-based templating: You can use this technique to connect third party template engine with the Knockout. To introduce the resulting markup string in your document Knockout will pass your model values to the external template engine.
Extensible: This method applies custom behaviors with very less lines of codes for easy reuse of new declarative bindings. Knockout is adaptable to integrate with libraries and technologies.
bower install knockout Or,
You can also use – – save option to add knockout to your “bower.json” file.
Step 1: Create bower.json file, bower init
Step 2: Install knockout using bower and save it into bower.json file. If knockout is already installed in the cached memory, bower will load first from the cached else it will download knockout from the internet.
Step 3: Add the knockout.js file located at the “bower_components/knockout/dist/” location as an HTML page and start working on the knockout.
Sample coding example with KnockoutJS
Knockout provides a standard way to connect a data model to a UI. It doesn’t depend on jQuery, but you can certainly use jQuery at the same time, and indeed that’s often useful if you want things like animated transitions. Add value to your business by hiring expert full-stack developers.
WRITTEN BY: Parth Patel
Parth Patel is a Microsoft Certified Solution Associate (MCSA) and DotNet Team Lead at CMARIX, a leading Asp.net mvc development company. With 10+ years of…
FEW MORE POSTS BY Parth Patel: