MVVM fundamentals,KnockoutJS & integration with Ignite UI

1. Building Databound
JavaScript Apps with
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 to MVVM
• MVVM in WPF – recap!
• MVVM in JavaScript
• Enterprise dashboards using HTML5/jQuery
• Q&A
Agenda

3. Intro to
MVVM

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 Collaboration without 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. WPF/SL MVVM Demo

7. JavaScript
then, now, & forever!

8. JavaScript MV* F/Ws

9. MVVM in
JavaScript

10. Introducing KnockoutJS
• Knockout is 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 to WPF
Runtime
CLR - XAML Binding
Business Logic
C#
Presentation
XAML
Window
Runtime
Browser - Knockout
Business Logic
JS
Presentation
HTML
Page

12. Step 1: Reference KO in the View
<script type="text/javascript" src="../scripts/ko/knockout-
2.1.0.js"></script>

13. Step 2: Associate the 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: Define Declarative 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
• Bindings are 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. KnockoutJS Demo

19. Enterprise dashboards using
HTML5/jQuery?

20. The World’s Most Adva
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
Sr VP, Developer Tools, Infragistics
@jasonberes / jasonb@Infragistics.com
Nishanth Anil
Technical Evangelist, Infragistics
@nishanil