Learn knockout.js — an intro
So what is really a MVVM pattern?
Model–view–view-model is a software architectural pattern. That facilitates separation of the user interface via markup language(view) from the business logic or back-end logic(model) and the view model is a value converter, meaning the view model is responsible for exposing the data objects from the model to the view.
- Elegant dependency tracking — automatically updates the right parts of your UI whenever your data model changes.
- Declarative bindings — a simple and obvious way to connect parts of your UI to your data model.
OK, how do you implement these features?
Now we are going to learn how to define a view and declarative bindings, its data and behaviour using viewmodels , and how everything stays in sync automatically. Consider the below example.
If we run the sample HTML code we can able to see the output as ‘Ben Tom’.
How to use bindings in view ?
<strong> elements in the view by adding
data-bind attributes to display the person’s name.
data-bind attributes are how Knockout lets you declaratively associate viewmodel properties with DOM elements. We just used the
text binding to assign text to our DOM elements.
Now if you run this code we cannot able to see the output, for seeing the actual data we need to define a viewmodel for this view.
How to define a viewmodel ?
So now if we run this code we can able to see the output as ‘Ben Tom’.
- Can be added on top of your existing web application.
- Works on any mainstream browser.
- Easy and Compact.
Knockout.js and how it is different from jQuery?
Knockout is not a replacement of jQuery. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality. Knockout.js is focused only on designing scalable and data-driven UI. Moreover Knockout.js is compatible with any other client-side and server-side technology. Knockout.js acts as a supplement to the other web technologies like jQuery.
Consider the below example’s(Example 1 & Example 2), it will help us to understand the main difference between both these library’s.
Example 1: take a look at this fiddle.
This is a simple jQuery code for inputting name in a text box and that will automatically reflect to the view while typing. For this functionality we need a key press event, a code to take the value from the text box and also we need a code for applying this value to the display. Simply saying for the above functionality we have used 5 lines of code.
Example 2: take a look at this fiddle.
The same above functionality that is done in Knockout, Now feel the difference its just a 3 simple lines of code.
KnockoutJS — Templating/Components.
- Template is a set of DOM elements which can be used repetitively.
- Templating makes it easy to build complex applications due to its property of minimizing duplication of DOM elements.
- Components are a huge way of organizing the sophisticated UI code for large applications and promote code re-usability.
The main idea is that we can separate both the HTML elements and viewmodels(Can even separate as different files). In this way we can reuse them.
Consider the Example-1: take a look at this fiddle.
In the HTML there is a <select> element for dropdown list and there is a ‘data-bind’ attribute in the <select> with some couple of Binding element’s inside such as,
- ‘options’ — For hold the values in dropdown.
- ‘optionsCaption’ — For default text in dropdown.
- ‘optionsText’ — For displaying the data.
ko.toJS() is a built-in method used to convert the json to the corresponding KO value. Now the data is in KO variable, So it will display the name in dropdown when we apply the bindings ‘ko.applyBindings();’
Consider the Example-2: take a look at this fiddle.
The Example-2 follows the same functionality and behavior that I have done in Example-1. The only change is for the structuring because of the KnockoutJS Components. By using this KO components I can able to separate the HTML and viewmodel. The viewmodel is same as the Example-1 follows and HTML have less code compare to the Example-1. The only thing is we need to add a Binding element(component) for integrating both the HTML and viewmodel together. All other HTML codes are assigned to a new variable (template) as a string . For registering this component we need to call ko.components.register() API. After applying the bindings ko.applyBindings() the data will display in the dropdown as same as in the Example-1.
So far, I’ve exposed facts about components. However, in this last section, I must say that in most situations I prefer to use components for their advantages: