-
7/25/2019 Building Rich User Interaction with Knockout JS
1/15
Building Rich User Interaction withKnockout JS
Ian Robinson
Enliven
-
7/25/2019 Building Rich User Interaction with Knockout JS
2/15
Ian Robinson
github.com/irobinson
@irobinson
http://github.com/irobinsonhttp://localhost/var/www/apps/conversion/tmp/scratch_5/twitter.com/irobinsonhttp://localhost/var/www/apps/conversion/tmp/scratch_5/twitter.com/irobinsonhttp://github.com/irobinson -
7/25/2019 Building Rich User Interaction with Knockout JS
3/15
Agenda
Introduction
Key Knockout Concepts
How? Live examples DotNetNuke 6.2
User File Manager Example
-
7/25/2019 Building Rich User Interaction with Knockout JS
4/15
Overview
Why JavaScript Frameworks?
https://github.com/addyosmani/todomvc
Backbone, Spine, Ember, Knockout
Structure provided by proven patterns (MVC, MVVM)
Knockout
MVVM
Model = Data (e.g. service) View = UI (e.g. html)
ViewModel = Code representation of data (e.g. JS object)
https://github.com/addyosmani/todomvchttps://github.com/addyosmani/todomvc -
7/25/2019 Building Rich User Interaction with Knockout JS
5/15
Key Concepts: Declarative
Bindings
Declarative Bindings
What and where, not how
-
7/25/2019 Building Rich User Interaction with Knockout JS
6/15
Key Concepts: Automatic UI
Refresh
Automatic UI Refresh
Your data drives the UI
Manipulate your data, not the DOM
-
7/25/2019 Building Rich User Interaction with Knockout JS
7/15
Key Concepts: Dependency
Tracking
Dependency Tracking
Create relationships between data
Observables, Observable Arrays, and Computed
Observables
-
7/25/2019 Building Rich User Interaction with Knockout JS
8/15
Key Concepts: Templating
Templating
Native (e.g. foreach, if)
String Based (third-party, e.g. Underscore,
jQuery.tmpl)
-
7/25/2019 Building Rich User Interaction with Knockout JS
9/15
Named Template
-
7/25/2019 Building Rich User Interaction with Knockout JS
10/15
External Template Engine
-
7/25/2019 Building Rich User Interaction with Knockout JS
11/15
Live Examples
http://knockoutjs.com/examples/helloWorld.html -
7/25/2019 Building Rich User Interaction with Knockout JS
12/15
Knockout in DotNetNuke 6.2
Shipped with DotNetNuke
/resources/shared/scripts/knockout.js
Used throughout the new modules
I implemented it in User File Manager
Templating
DNN Service API
Custom bindings Computed bindings
jQuery Plugin / Reusable Component
-
7/25/2019 Building Rich User Interaction with Knockout JS
13/15
User File Manager
-
7/25/2019 Building Rich User Interaction with Knockout JS
14/15
Thank you!
Ian Robinson
Co-Founder & CTO
Enliven
@irobinson | @enlivenhq
-
7/25/2019 Building Rich User Interaction with Knockout JS
15/15
Thanks to all our Generous Sponsors!
