How to Troubleshoot Apps for the Modern Connected Worker
Using mvvm on the web using knockoutjs & ignite ui
1. Using MVVM on
the web with Ignite
UI & Knockoutjs
NISHANTH ANIL
TECHNICAL EVANGELIST
nanil@infragistics.com | nnish.com
facebook.com/InfragisticsIndia
@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
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
