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