Every one thinks that knockoutJs is difficult but actually it’s not. Therefore, we come up with series of knockoutJs.
This is first chapter where we will learn basic understanding for it.
We will use CDN (content delivery network) library throughout series.
|
1 |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script> |
Above Script tag we will use in head html node.
First clear the concepts on MVVM and View Models.
MVVM stands for Model-View-View Model which help out in user interfaces.
- Model: stored application data. Take a note here, data does not save to application directly either use ajax or on load to retrieve data from database to server. After storing data, read and write model data.
- View Model: In simple words, code representation of data and operations on UI (User Interface). As an example, we have a button which show text “Submit form” and hold action of form submission. In this case, view model would be an object holds button’s action validating and submission of form. Button it self is UI but action and data on button are not UI that is we call View Model.
- View : In knockout (KO), view is HTML documents with declarative bindings which link to view model. In more simple words, pure HTML but operation and data (view model).
Now, check one code for every definitions.
ViewModel:
Below code is viewModel which holds data of employee name and age.
|
1 2 3 4 |
var employeeViewModel = { empName: 'Robert', empAge: 25 }; |
View :
|
1 |
An Employee name is <span>Robert</span> |
Above is simple HTML with static name of employee name.
Now let’s look at knockout html.
|
1 |
An Employee is <span data-bind="text: empName"></span> |
knockout HTML binds empName as text. Now question is how come it knows from where empName need to take for that we have to bind it.
To do same, we have to activate knockout and to do so need to use applyBindings and pass viewModel as parameters.
|
1 |
ko.applyBindings(employeeViewModel); |
So final working code look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script> </head> <body> <!-- view -->> An Employee is <span data-bind="text: empName"></span> <script> // view model var employeeViewModel = { empName: 'Robert', empAge: 25 }; // binding ko.applyBindings(employeeViewModel); </script> </body> </html> |
This is all basics of knockout.