Scribd
Upload
38 views

Building Rich User Interaction With Knockout JS

This document discusses building rich user interfaces with Knockout JS. It provides an overview of Knockout and its key concepts including declarative bindings, automatic UI refresh through dependency tracking, and templating. It then discusses an example of how Knockout was used to build the User File Manager module in DotNetNuke 6.2, leveraging Knockout's templating, bindings to DNN services, and other features. Live examples of Knockout are also presented.

Uploaded by

Ian
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Building Rich User Interaction With Knockout JS

This document discusses building rich user interfaces with Knockout JS. It provides an overview of Knockout and its key concepts including declarative bindings, automatic UI refresh through dependency tracking, and templating. It then discusses an example of how Knockout was used to build the User File Manager module in DotNetNuke 6.2, leveraging Knockout's templating, bindings to DNN services, and other features. Live examples of Knockout are also presented.

Uploaded by

Ian
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Building Rich User Interaction with

Knockout JS
Ian Robinson
Enliven

Ian Robinson
github.com/irobinson
@irobinson

Agenda

Introduction
Key Knockout Concepts
How? Live examples
DotNetNuke 6.2
User File Manager Example

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)

Key Concepts: Declarative


Bindings
Declarative Bindings
What and where, not how

Key Concepts: Automatic UI


Refresh
Automatic UI Refresh
Your data drives the UI
Manipulate your data, not the DOM

Key Concepts: Dependency


Tracking
Dependency Tracking
Create relationships between data
Observables, Observable Arrays, and Computed
Observables

Key Concepts: Templating


Templating
Native (e.g. foreach, if)
String Based (third-party, e.g. Underscore,
jQuery.tmpl)

Named Template

External Template Engine

Live Examples

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

User File Manager

Thank you!
Ian Robinson
Co-Founder & CTO
Enliven
[email protected]
@irobinson | @enlivenhq

Thanks to all our Generous Sponsors!

You might also like