RESPONSIVE VIEWS WITH KNOCKOUT

Brian DukesEngage

Who Are You

Chief Software Architect

Engage

St. Louis, MO

Working with DNN since 2008

Using Knockout on personal and professional projects since early 2011

Where Are You Taking Me

Why Knockout

What is Knockout

How do I Knockout

Getting Truth out of the DOM

Yehuda Katz – ember.js

MVC & MVVM Frameworks

Goal

Getting your data out of the DOM– Stop handling jQuery events

Prerequisites

JavaScript

HTML

Knockout is JavaScript

JavaScript: The Good Parts– by Douglas Crockford

JavaScript Enlightenment– by Cody Lindley– http://javascriptenlightenment.com/

Cleanliness

“I don’t think Knockout is used (primarily) by devs that care much about keeping their javascript clean.”

– Rob Conery

What is Knockout

What are the features

What does it look like

Scenario

{ formId: 1,

title: 'Contact Form',

questions: [{

title: 'Name',

type: 'text'

}, {

title: 'Reason',

type: 'dropdown',

answers: ['Sales', 'Support']

}, {

title: 'Message',

type: 'textarea' }]

}

Demo One

Learn about: Data binding

Task: Show the form title

Demo Two

Learn about: Templating

Task: List the questions

Demo Three

Learn about: Observables

Task: Edit question text

Demo Four

Learn about: Dependency Tracking

Task: Display answer input

How Do I Use Knockout

In ASP.NET

In DotNetNuke

With a Database

Client Resource Management

DNN 6.2

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

<dnn:DnnJsInclude runat="server" FilePath="knockout.js" PathNameAlias="SharedScripts" />

How Do I Get the Model?

Knockout.binding plugin

JavaScript Serializer

DNN Services Framework

How Do I Tell the Server About Updates? DNN Services Framework

Serialize view model to hidden field

Just manage existing ASP.NET control

Validation

HTML 5 Validation

ASP.NET Validation

jQuery Validation

is*Valid computed properties

Demo Five

Fill it out

Resources

http://learn.knockoutjs.com/

http://knockoutjs.com/

Conclusion

JavaScript model

DOM binding

Code cleanliness

Ease of development and organization