Dear All,
I heard a lot about “Knockout.js”.
So let us understand it first. “knockout.js “ is rich java script mode. It helps you to work on “MVVM” (Model View View Model) architecture pattern.
It helps you to work on “Reactive programming or push model ". It means you can track your UI changes without much effort what ever changes done on View level (UI) it easily reflected in your viewmodel.
Let up try it and make a sample, but how to start it this is one of the concern.
So here I am with step by step approach how to start it
Step 1:- Create a new web project. I have selected empty template. so right now there is no item exists in it
Step 2:- click on nuget package as shown below
Step 3: We need to add first Jquery package so search Jquery package and add it as shown in below fig
Step 4:- Once JQUERY package is installed on your project now add new package which is knockout.Js package as shown in below fig
Step 5:- Once both this package installed we will add a new page which is default.html now add reference of both JQUERY & Knockout.js to this page
Now I am adding employee view as shown below
Let me explain each important line in this.
In our example we have created EmployeeReviewVM function which is basically a view model function for knockout js.In this function we have define Name & Rating two property and one more computed property (dependent on Rating property value).
we have used “ko.observable” it is used for push mode means whatever changed on View should reflect in viewModel also and vice versa.
Now we have used “ko.computed” function it means what ever the value changed of Rating the increment property calculated at runtime.
Step 5:
Now how to use in view part.
So if you see in the above picture we have used data-bind property which basically bind the EmployeeViewmodel to html. We have used span so internally we have used text if we have used input tag then we can use value property.
Step 6: Now when you run it you will get following page result.
I hope you are good to go with this. you can use different property like array , for each etc to fetch data.
You can use knockout js for SPA creation.
I hope this tutorial give you basic idea.
Enjoy Knockout js.
Thanks & Best Regards,
Rajat Jaiswal
