Read here Getting started with Knockout.js part1
In last post we had a discussion on Getting started with Knockout. In this post we will go one step further and understand different aspects of MVVM pattern and how Knockout.js helps us in creating web application adhering to MVVM pattern.
Let us start our discussion with understanding MVVM. MVVM stands for Model-View-ViewModel.
As you see that each component of MVVM has dedicated task to do. View never talks to Model directly. You can say that data is model, business logic is ViewModel and user interface is View. Let us summarize discussion of Model, ViewModel and View in bullet points
Model
- Persisted data
- Data being fetched from server
- Data can be in HTML local storage
- Data can be fetched from server using AJAX call or any other mechanism of calling service from JavaScript
ViewModel
- It contains business logic
- Temporary data to be displayed on the View
- It handles all the user actions to send commands to ViewModel
- It is a JavaScript object
View
- This is User Interface of the application
- This displays data from the ViewModel.
- This sends command to ViewModel
- User interaction occurs here
- This is HTML with CSS
Now let us take our discussion into working with Knockout. We can create a ViewModel just like creating a JavaScript object. Below we are creating ViewModel for Student.
var studentViewModel = {
studentName: "DJ",
studentGrade: "B",
studentMarks : 90
}
After creating ViewModel to work with all browsers and earlier versions of HTML, we need to activate Knockout. That can be done as following in a script
You can put this script
- Either in bottom of HTML document
- In document ready of jquery
In VS2012 intellisense is supported for Knockout.js. You can see that applyBindings takes two parameters.
Two parameters of applyBindings are
- First parameter is ViewModel
- Second parameter is part of the document on which ViewModel will be bind
Second parameter is very essential. Suppose a scenario in which you have multiple ViewModel and you want to associate them with different elements of HTML document. In that case you will have to create different Knockout bindings associating different ViewModel with different elements from View. Below we are applying studentViewModel to studentdiv from the View.
We can create View with Declarative Binding as following. Using data-bind attribute we can bind data from ViewModel to elements of View. You can see that in this case we are putting script to apply Knockout binding at the bottom of HTML document.
<body> <span data-bind="text:studentName"></span> <span data-bind="text:studentGrade"></span> <span data-bind="text:studentMarks"></span> <script> ko.applyBindings(studentViewModel); </script> </body>
We saw in this post that how Knockout helps so easily to create an application adhering to MVVM pattern. We also learnt about different component of MVVM pattern. We learnt about creating ViewModel and View. We also learnt bindings in Knockout.js. In further posts we will discuss more complex aspects of Knockout.js. I hope you find this post useful. Thanks for reading.
Dhananjay Kumar 
Leave a comment