1. Using MVVM on
the web with Ignite
UI & Knockoutjs
NISHANTH ANIL
TECHNICAL EVANGELIST
nanil@infragistics.com | nnish.com
facebook.com/InfragisticsIndia
@nishanil

2. Agenda
– Patterns
– What’s MVVM?
– What’s Knockoutjs?
• Simple MVVM Demo
– What’s Ignite UI?
• Building Enterprise Dashboard in HTML5/jQuery
demo
– Comparing Javascript MV* frameworks
@nishanil

3. Patterns – are guidelines not
rules!
• UI patterns
– Model – View – Controller
– Model – View – Presenter
– Presentation Model
– Model – View – ViewModel
• Why do they exist?
– Separation of concerns
– Testability
– Maintainability
@nishanil

4. MVVM?
View ViewModel Model
(HTML) (jsonxml)
@nishanil

5. MVVM recap – WPF
– INotifyPropertyChanged/INotifyCollectionChanged
– DataContext
– DataBinding
– Commanding
Read more:
http://nnish.in/myIGblog
@nishanil

6. MVVM on the web?
@nishanil

7. @nishanil

8. What’s knockoutjs?
– a compact javascript library
– implements the MVVM pattern for Javascript
– rich client-side interactivity
– supports all major browsers
6+ 2+
http://knockoutjs.com/documentation/browser-support.html
@nishanil

9. Key Concepts
@nishanil

10. Knockout in 3 steps
– Declarative Binding
– Dependency Tracking using Observable
– Activating knockout
@nishanil

11. Observables
– Updates UI automatically when the
ViewModel changes (UI notification)
– Very famous 2 way binding!
– Declare your properties as ko.observable()
– ko.observable() objects are functions, not a
property!
@nishanil

12. Computed Observables
– Computes value based on one more
dependent observable (for e.g, compute full
name based on first name & last name)
@nishanil

13. Declarative Binding
– It’s all about data-bind attribute in HTML
– Not native to HTML, but perfectly OK!
– The binding value can be a single value, variable, or
literal or almost any valid JavaScript expression.
Built-in Bindings valueUpdate options
value, visible, text, change, keyup, keypre
uniqueName, click ss, afterkeydown
etc…
Not happy with built-in bindings? – roll your own! (custom bindings)
@nishanil

14. Observable Array
– Tracks which objects are in the array, not the
state of those objects
– Notifies changes for add & remove
– No notification for item changes! (use
ko.observable())
Pre-populating ObservableArray
Binding it
@nishanil

15. Built-in Bindings
Text & Appearance
visible text attr style css html
Working with Form Fields
click disable submit value hasfocu enable
s
event checked options selectedOptions uniqueName
Or roll your own! Support s custom binding
@nishanil

16. Binding – Control Flow
foreach
Foreach example
if
ifnot
with
@nishanil

17. Knockout & jQuery
• Not a jQuery competitor, Knockout solves
a different problem!
• Will work together!
@nishanil

18. Knockoutjs Demo
@nishanil

19. Enterprise dashboards using
HTML5/jQuery?
@nishanil

20. @nishanil

21. The World’s Most Advanced
JavaScript & HTML5 UI
Framework
@nishanil

22. @nishanil

23. and a lot more… www.igniteui.com
@nishanil

24. Ignite UI Demo
@nishanil

25. Javascript MV* F/W Web
Composed Plays Nicely
Framework UI Bindings Presentation
Views With Others
Layer
Backbone.js ✗ ✗ ✓ ✓
SproutCore 1.x ✓ ✓ ✗ ✗
Sammy.js ✗ ✗ ✓ ✓
Spine.js ✗ ✗ ✓ ✓
Cappuccino ✓ ✓ ✗ ✗
Knockout.js ✓ ✗ ✓ ✓
Javascript
✗ ✓ ✓ ✓
MVC
Google Web
✗ ✓ ✗ ✗
Toolkit
Google
✗ ✓ ✓ ✗
Closure
Ember.js ✓ ✓ ✓ ✓
Angular.js ✓ ✗ ✓ ✓
Batman.js ✓ ✗ ✓ ✓
Source: http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
@nishanil

26. Resources
– Ignite UI
• www.igniteui.com
– Infragistics Community
• http://www.infragistics.com/community/
– KnockoutJS –
• learn.knockoutjs.com
• http://www.knockmeout.net/
– If you are new to Javascript
• https://developer.mozilla.org/en-US/docs/JavaScript/Guide
– Javascript MVC Frameworks reviewed
• http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-
reviewed/
@nishanil

27. Slides & Samples
• You can download these slides from
– http://www.slideshare.net/nishanthanil/
• Samples
– Knockout
• https://github.com/nishanil/koSamples
– Ignite UI Grid & Knockoutjs
• http://www.infragistics.com/products/jquery/sample
/grid/grid-knockoutjs-integration
@nishanil

28. Q&A
@nishanil on twitter
facebook.com/InfragisticsIndia
NISHANTH ANIL
TECHNICAL EVANGELIST
nanil@infragistics.com | nnish.com
@nishanil