Building databound JavaScript apps with Knockoutjs


Published on

MVVM fundamentals,KnockoutJS & integration with Ignite UI

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building databound JavaScript apps with Knockoutjs

  1. 1. Building DataboundJavaScript Apps withKnockoutJSJason BeresSr VP, Developer Tools, Infragistics@jasonberes / jasonb@Infragistics.comNishanth AnilTechnical Evangelist, Infragistics@nishanilTom PuglisiTechnical Evangelist,
  2. 2. • Introduction to MVVM• MVVM in WPF – recap!• MVVM in JavaScript• Enterprise dashboards using HTML5/jQuery• Q&AAgenda
  3. 3. Intro toMVVM
  4. 4. The MVVM Pattern• Model-View View-Model• Software architectural design pattern• Emerged in the 2005 timeframe to support the declarative data binding features ofWPF / XAML
  5. 5. Benefits• Developer/Designer Collaboration without Conflict - Since the UI is void of anynon-visual code such as business logic, the team’s designer can confidently workon modifying the code without worrying about breaking the programmer’s code.• Testable Code - Decoupling the view from the view model enables us to writeclean unit tests.• Code Maintainability - Testable, decoupled code is easier to maintain. A bug canbe found much more easily if there is only one place to inspect.
  6. 6. WPF/SL MVVM Demo
  7. 7. JavaScriptthen, now, & forever!
  8. 8. JavaScript MV* F/Ws
  9. 9. MVVM inJavaScript
  10. 10. Introducing KnockoutJS• Knockout is an open source JavaScript library that enables MVVM applications byimplementing binding• Properties in the Model classes are of type ko.observable• Observables in JavaScript notify subscribers of property changes• Supports all major browsers6+ 2+
  11. 11. Comparing JavaScript to WPFRuntimeCLR - XAML BindingBusiness LogicC#PresentationXAMLWindowRuntimeBrowser - KnockoutBusiness LogicJSPresentationHTMLPage
  12. 12. Step 1: Reference KO in the View<script type="text/javascript" src="../scripts/ko/knockout-2.1.0.js"></script>
  13. 13. Step 2: Associate the View Model with the View<script>$(document).ready(function () {// Instantiate the CustomerViewModel model and apply bindingsvar customerViewModel = new CustomerViewModel();ko.applyBindings(customerViewModel);});</script>
  14. 14. Step 3: Define Declarative Bindings in the View<div id="ListMenu" ><ul data-bind="foreach: customers"><div><img width=100 height=100 align=middle style=padding:5pxdata-bind="attr: { src: pictureURL }"></img><a style=font-size:15pt;cursor:pointer;color:#067EBFdata-bind="text: fullName "></a></div></ul></div>
  15. 15. Understanding Bindings• Bindings are declared in the visual element mark-up by using the data-bindattribute.• These bindings are associated with view model properties that are known asobservables.• Observables are properties that will automatically issue notifications whenevertheir value changes.function CustomerViewModel() {var self = this;// Propertiesself.customers = ko.observableArray();
  16. 16. Knockout Bindings• foreach: Lets you iterate through a loop and apply the same markup to each itemin the list. This is used to render the to-do lists and to-do items. Within theforeach, the bindings are applied to the elements of the list.• visible: Used to toggle visibility. Hide markup when a collection is empty, or makethe error message visible.• value: Used to populate form values.• click: Binds a click event to a function on the view model.
  17. 17. Knockout & jQuery• Not a jQuery competitor, Knockout solves a different problem!• Will work together!
  18. 18. KnockoutJS Demo
  19. 19. Enterprise dashboards usingHTML5/jQuery?
  20. 20. The World’s Most AdvaJavaScript & HTML5UI Framework
  21. 21. Cross-Platform WebDevelopmentBuild 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, MVC4KnockOutJS• Flat, Hierachical, OLAP Pivot Grids• High performance charting controls• Geospatial mapping• Mobile UI controls, Adaptive CSS
  22. 22. Demo: Ignite UI – KnockoutJS
  23. 23. Resources• Knockout & MVVM Step by Step -• Building Enterprise dashboards in Ignite UI -
  24. 24. Thank You!Jason BeresSr VP, Developer Tools, Infragistics@jasonberes / jasonb@Infragistics.comNishanth AnilTechnical Evangelist, Infragistics@nishanil