Working with Knockout.js part 2: Understanding MVVM

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.

image

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

image

You can put this script

  1. Either in bottom of HTML document
  2. In document ready of jquery

In VS2012 intellisense is supported for Knockout.js. You can see that applyBindings takes two parameters.

image

Two parameters of applyBindings are

  1. First parameter is ViewModel
  2. 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.

image

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.

7 thoughts on “Working with Knockout.js part 2: Understanding MVVM

  1. Pingback: Geek Reading February 4, 2013 | Regular Geek

  2. Pingback: Dew Drop – February 4, 2012 (#1,493) | Alvin Ashcraft's Morning Dew

  3. Pingback: Dew Drop – February 6, 2013 (#1,494) | Alvin Ashcraft's Morning Dew

  4. Pingback: Working with Knockout.js Part 3: Working with Observables « debug mode……

  5. Pingback: Working with Knockout.js Part 4: Observable Arrays « debug mode……

  6. Pingback: Working with Knockout.js Part 5: Working with visible Binding « debug mode……

  7. Pingback: Working with Knockout.js Part 6: Working with text binding « debug mode......

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s