Practical MVVM with Knockoutjs

MVVM

Model -View- ViewModel 

An Architectural Pattern for building User Interface which Separates a view from its behavior and state. The interesting part of the MVVM pattern is that an abstraction of a view is created, called the ViewModel. A view, then, becomes merely a rendering of a ViewModel. ViewModel frequently updates its View, so that the two stay in sync with each other.

1. Model

   Partial or complete representation of bussiness objects.
   Simple data model

2. View Model

   An abstraction of a view's behavior and state.
   Syncs the View with itself.
   Contains synchronization logic
   Exposes data contained in model objects
   Performs all modifications made to the model

3. View (Presentation)

   What you see on the screen which renders the ViewModel.
   Responsible for defining the structure, layout, and appearance of what the user sees on the screen.
   Binds to properties on a ViewModel.     

      

As the ViewModel encapsulate all state and behavior you can easily reuse it in a diffrent View.

Benefits:

  During the development process, developers and designers can work more independently and concurrently on their components.

  The developers can create unit tests for the view model and the model without using the view.

  

  It is easy to redesign the UI of the application without touching the code because the view is implemented entirely in Html(With some binding logic).

 Multiple Views can share existing view model.

EASIER to Comprehend, Discuss, Extend, and Troubleshoot.      

Kncockoutjs>>