Knockout implementing mvvm in java script with knockout
Download as PPTX, PDF0 likes1,193 views
This document discusses implementing the MVVM pattern in JavaScript using Knockout.js. It begins with an introduction to MVVM and the benefits of the pattern. It then provides an overview of Knockout.js and demonstrates how to connect views to view models, use computed observables and observable arrays, implement control flow bindings and interactive bindings, access external data with templates, and create custom bindings. The presentation includes examples of working with Knockout.js.
Knockout implementing mvvm in java script with knockout
- 1. Implementing MVVM in JavaScript with Knockout Knockout JS
- 2. Who am I? • Andoni Arroyo Development Advisor at Plain Concepts. • Blog http://geeks.ms/blogs/aarroyo/ • Web http://www.andoniarroyo.com/ • Twitter @andoniarroyo • LinkedIn http://www.linkedin.com/in/andoniarroyo
- 3. Agenda • Why I need a pattern? • MVVM (Model View ViewModel) and The Benefits of MVVM • Knockout JS • Connecting View Models to Views, Computed observables, Observable Arrays • Control-Flow Bindings • Interactive Bindings • Accessing External Data • The template binding • Some common techniques… • Custom bindings
- 4. Why I need a pattern? • Complexity • Rightsizing • Maintain your code • You are not alone! (diferents profiles) • Testeability • UX • Avoiding roundtrips • SPA (Web, mobile)
- 5. Ok, we need a plan… • A pattern is a plan! • All the profiles know where set and get the elements. • Take in mind Project requeriments.
- 6. MVVM (Model View ViewModel) • Architectural pattern • Based on MVC and MVP • Separate: • User-interfaces (UI). • Behavior of the application. (State and workflow). • Business logic.
- 7. Model • Implementation of the application's domain model. • Data model along with business and validation logic. • Repositories, business objects, data transfer objects (DTOs), Plain Old CLR Objects (POCOs), and generated entity and proxy objects.
- 8. View • Visual representation of that data Structure, layout, and appearance of what the user sees on the screen. • Receives the user’s interaction.
- 9. View Model • Intermediary between the view and the model, and is responsible for handling the view logic. • Provides data from the model in a form that the view can easily use. • Provides implementations of commands that a user of the application initiates in the view. • Defining logical state changes that affect some aspect of the display in the view.
- 10. The Benefits of MVVM • Separation Separation of concerns • Developers and designers can work more independently and concurrently on their components. • Decoupled pieces. • Maintenible code (More testeable and easy to understand)
- 11. Knockout JS • JavaScript library: • Declarative Bindings Easily associate DOM elements with model data using a concise, readable syntax. • Automatic UI Refresh When your data model's state changes, your UI updates automatically. • Dependency Tracking Implicitly set up chains of relationships between model data, to transform and combine it. • Templating Quickly generate sophisticated, nested UIs as a function of your model data.
- 12. Knockout JS (Some features) • No dependencies • Browser support: • Mozilla Firefox 2.0+ (latest version tested = 3.6.8) • Google Chrome (tested on version 5 for Windows and Mac; should work on older versions too) • Microsoft Internet Explorer 6, 7, 8, 9, 10 • Apple Safari (tested on Windows Safari version 5, Mac OS X Safari version 3.1.2, and iPhone Safari for iOS 4; should work on newer/older versions too). • Opera 10 for Windows. • Don’t recheck these for every release: • Opera Mini • Google Android OS browser (OS version 2.2)
- 13. Connecting Views to View Models • Observables JavaScript variables but let Knockout observe their changes and automatically update the relevant parts of the view. • Bindings (data-bind) Connect a user interface component in the view to a particular observable, you have to bind an HTML element to it. • ko.applyBindings Create a relation between the View and the source object.
- 14. Demo • Demo 1 - Connecting Views to View Models
- 15. Computed observables • Properties that are dynamically generated. Let combine several normal observables into a single property, and Knockout will still keep the view up-to-date whenever any of the underlying values change.
- 16. Demo • Demo 2 - Computed observables
- 17. Observable Arrays • Let track lists of items. • Implementation of the common methods: push() pop() unshift() shift() slice() remove() removeAll() destroy() destroyAll() sort() reversed() indexOf()
- 18. Control-Flow Bindings • The foreach binding Iterates through the array and uses each item it finds for the binding context of the contained markup. • Binding context ($root, $data, $index, $parent) • Events (afterRender, afterAdd, beforeRemove, beforeMove, afterMove)
- 19. Control-Flow Bindings II • if and ifnot If the parameter you pass evaluates to true, the contained HTML will be displayed, otherwise it’s removed from the DOM. • with Used to manually declare the scope of a particular block.
- 20. Demo • Demo 3 - Control-Flow Bindings
- 21. Interactive Bindings • click: <method> Call a ViewModel method when the element is clicked. • value: <property> Link a form element’s value to a ViewModel property. • enable: <property>/ disable: <property> Enable/Disabled an element based on a certain condition. • checked: <property> Link a radio button or check box to a ViewModel property.
- 22. Interactive Bindings II • options: <array> Define a <select> element with a ViewModel array. • selectedOptions: <array> Define the active elements in a <select> field. • event: <object> Call a method when a user-initiated event occurs. • submit: <method> Call a method when a form is submitted. • hasfocus: <property> Define whether or not the element is focused
- 23. Demo • Demo 4 - Interactive Bindings
- 24. Accessing External Data • Load ViewModel from JSON ko.mapping.fromJS • Converting View Model Data to Plain JSON ko.mapping.toJS • knockout.mapping plugin
- 25. Demo • Demo 5 - Accessing External Data
- 26. The template binding • Out of the box “inline” • External templates • Knockout.js External Template Engine • https://github.com/ifandelse/Knockout.js-External-Template-Engine (nuget) • https://nuget.org/packages/Knockout.js_External_Template_Engine
- 27. Demo • Demo 6 - Templates
- 28. Some common techniques… • Subscribe to observables. • The "throttle" extender. • re-evaluation until its dependencies have stopped changing for a specified period of time
- 29. Demo • Demo 7 - Common techniques
- 30. Custom bindings • The way to extend Knockout • ko.bindingHandlers • init Once for each DOM element that you use the binding on. • set any initial state • register any event handlers • update The associated observable has changed
- 31. Demo • Demo 7 – Creating customBinding
- 32. Questions?
- 33. Thank you • Andoni Arroyo • andoni.arroyo@gmail.com • Blog http://geeks.ms/blogs/aarroyo/ • Web http://www.andoniarroyo.com/ • Twitter @andoniarroyo • LinkedIn http://www.linkedin.com/in/andoniarroyo
Editor's Notes
- #23: http://jsfiddle.net/TrH3b/