MVVM - KnockoutJS

MVVM – Knockout.jsMUHAMMAD AMIR – [email protected]

The MVVM PatternArchitectural pattern Originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler

Largely based on the model–view–controller pattern (MVC)

Presentation Model design patterns are available in HTML5 through AngularJS, [2][3] KnockoutJS, and for Java the ZK framework (Model-View-Binder)

Presentation Model - Represent the state and behavior of the presentation independently of the GUI controls used in the interface

Elements of the MVVM pattern include:

Model: as in the classic MVC pattern, the model refers to either (a) a domain model which represents the real state content (an object-oriented approach), or (b) the data access layer that represents that content (a data-centric approach).

View: as in the classic MVC pattern, the view refers to all elements displayed by the GUI such as buttons, labels, and other controls.

View model: the view model is a “model of the view” meaning it is an abstraction of the view that also serves in mediating between the view and the model which is the target of the view data bindings.

Controller: some references for MVVM also include a controller layer others do not. This difference is an ongoing area of discussion regarding the standardization of the MVVM pattern.

Binder: the use of a declarative data binding and command bind technology is an implicit part of the pattern.

The MVVM PatternMVVM is a clear separation of the development of the graphical user interface from the development of the business logic or back end logic known as the model

The MVVM PatternMVVM is a clear separation of the development of the graphical user interface from the development of the business logic or back end logic known as the model

KnockoutJS

KnockoutJS

KnockoutJS

KnockoutJS

KnockoutJSStandalone JavaScript implementation of the Model-View-ViewModel pattern

A clear separation between domain data, view components and data to be displayed

The presence of a clearly defined layer of specialized code to manage the relationships between the view components

KnockoutJSFeatures:

Declarative bindings - Easily associate DOM elements with model data using a concise, readable syntax

Automatic UI refresh - when the data model's state changes, the UI updates automatically

Dependency tracking - Implicitly set up chains of relationships between model data, to transform and combine it

Templating - using a native template engine although other templating engines can also be used, such as jquery.tmpl)

KnockoutJS

KnockoutJS - Simple exampleIn this example, two text boxes are bound to observable variables on a data model.

The "full name" display is bound to a dependent observable, whose value is computed in terms of the observables. When either text box is edited, the "full name" display is automatically updated, with no explicit event handling.

KnockoutJS - Simple example

Linkshttp://msdn.microsoft.com/en-us/library/hh848246.aspx

http://martinfowler.com/eaaDev/PresentationModel.html

http://en.wikipedia.org/wiki/Model_View_ViewModel

http://en.wikipedia.org/wiki/KnockoutJS

http://knockoutjs.com/