Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MVVM - KnockoutJS

1,021 views

Published on

Model View ViewModel

Published in: Technology
  • Be the first to comment

  • Be the first to like this

MVVM - KnockoutJS

  1. 1. MVVM – Knockout.js MUHAMMAD AMIR – A M I R 4IT@ GMAI L.COM
  2. 2. The MVVM Pattern  Architectural 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-ViewBinder) Presentation Model - Represent the state and behavior of the presentation independently of the GUI controls used in the interface
  3. 3. 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.
  4. 4. The MVVM Pattern MVVM 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
  5. 5. The MVVM Pattern MVVM 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
  6. 6. KnockoutJS
  7. 7. KnockoutJS
  8. 8. KnockoutJS
  9. 9. KnockoutJS
  10. 10. KnockoutJS Standalone 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
  11. 11. KnockoutJS Features:  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)
  12. 12. KnockoutJS
  13. 13. KnockoutJS - Simple example In 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.
  14. 14. KnockoutJS - Simple example
  15. 15. Links  http://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/

×