Uploaded byNish Anil
Building databound JavaScript apps with Knockoutjs
The document introduces Model-View-ViewModel (MVVM) and how it can be implemented using KnockoutJS in JavaScript applications. It discusses how KnockoutJS uses observables to establish two-way bindings between the view and view model layers. The document provides an example of building a simple customer management application with KnockoutJS and demonstrates how bindings update the view when observables change. It also discusses how KnockoutJS can be used to create enterprise dashboards with HTML5, jQuery, and Ignite UI controls.
Building databound JavaScript apps with Knockoutjs
- 1. Building Databound JavaScript Appswith KnockoutJS Jason Beres Sr VP, Developer Tools, Infragistics @jasonberes / jasonb@Infragistics.com Nishanth Anil Technical Evangelist, Infragistics @nishanil Tom Puglisi Technical Evangelist, Infragistics tomp@Infragistics.com
- 2. • Introduction toMVVM • MVVM in WPF – recap! • MVVM in JavaScript • Enterprise dashboards using HTML5/jQuery • Q&A Agenda
- 3.
- 4. The MVVM Pattern •Model-View View-Model • Software architectural design pattern • Emerged in the 2005 timeframe to support the declarative data binding features of WPF / XAML
- 5. Benefits • Developer/Designer Collaborationwithout Conflict - Since the UI is void of any non-visual code such as business logic, the team’s designer can confidently work on modifying the code without worrying about breaking the programmer’s code. • Testable Code - Decoupling the view from the view model enables us to write clean unit tests. • Code Maintainability - Testable, decoupled code is easier to maintain. A bug can be found much more easily if there is only one place to inspect.
- 6.
- 7. JavaScript then, now, &forever!
- 8.
- 9.
- 10. Introducing KnockoutJS • Knockoutis an open source JavaScript library that enables MVVM applications by implementing binding • Properties in the Model classes are of type ko.observable • Observables in JavaScript notify subscribers of property changes • Supports all major browsers 6+ 2+
- 11. Comparing JavaScript toWPF Runtime CLR - XAML Binding Business Logic C# Presentation XAML Window Runtime Browser - Knockout Business Logic JS Presentation HTML Page
- 12. Step 1: ReferenceKO in the View <script type="text/javascript" src="../scripts/ko/knockout- 2.1.0.js"></script>
- 13. Step 2: Associatethe View Model with the View <script> $(document).ready(function () { // Instantiate the CustomerViewModel model and apply bindings var customerViewModel = new CustomerViewModel(); ko.applyBindings(customerViewModel);}); </script>
- 14. Step 3: DefineDeclarative Bindings in the View <div id="ListMenu" > <ul data-bind="foreach: customers"> <div> <img width='100' height='100' align='middle' style='padding:5px' data-bind="attr: { src: pictureURL }"></img> <a style='font-size:15pt;cursor:pointer;color:#067EBF' data-bind="text: fullName "></a> </div> </ul> </div>
- 15. Understanding Bindings • Bindingsare declared in the visual element mark-up by using the data-bind attribute. • These bindings are associated with view model properties that are known as observables. • Observables are properties that will automatically issue notifications whenever their value changes. function CustomerViewModel() { var self = this; // Properties self.customers = ko.observableArray();
- 16. Knockout Bindings • foreach:Lets you iterate through a loop and apply the same markup to each item in the list. This is used to render the to-do lists and to-do items. Within the foreach, the bindings are applied to the elements of the list. • visible: Used to toggle visibility. Hide markup when a collection is empty, or make the error message visible. • value: Used to populate form values. • click: Binds a click event to a function on the view model.
- 17. Knockout & jQuery •Not a jQuery competitor, Knockout solves a different problem! • Will work together!
- 18.
- 19.
- 20. The World’s MostAdva JavaScript & HTML5 UI Framework
- 21. Cross-Platform Web Development Build standards-based,touch-enabled HTML5 & jQuery experiences for desktop, tablet & mobile delivery, including multi-device targeting with frameworks like PhoneGap and MVC. • HTML5, CSS3, jQuery based toolkit • Pure Client-Side Performance • jQuery Core + jQuery Mobile Library • Theme Roller + CSS3 Support • Touch Everywhere • Support for MVC2, MVC3, MVC4 KnockOutJS • Flat, Hierachical, OLAP Pivot Grids • High performance charting controls • Geospatial mapping • Mobile UI controls, Adaptive CSS
- 22. Demo: Ignite UI– KnockoutJS
- 23. Resources • Knockout &MVVM Step by Step - http://www.developer- tech.com/news/2012/dec/13/knockoutjs-mvvm-framework-jquery-developers/ • Building Enterprise dashboards in Ignite UI - http://www.infragistics.com/products/jquery
- 24. Thank You! Jason Beres SrVP, Developer Tools, Infragistics @jasonberes / jasonb@Infragistics.com Nishanth Anil Technical Evangelist, Infragistics @nishanil