Responsive Views with Knockout
Download as PPTX, PDF0 likes1,869 views
The document is a presentation by Brian Dukes on using Knockout.js, detailing its features, use cases, and integration with frameworks like ASP.NET and DotNetNuke. It emphasizes the importance of data binding and observables for cleaner JavaScript code and showcases practical demos. Resources for learning Knockout.js and various validation methods are also provided.
![Scenario
{ formId: 1,
title: 'Contact Form',
questions: [{
title: 'Name',
type: 'text'
}, {
title: 'Reason',
type: 'dropdown',
answers: ['Sales', 'Support']
}, {
title: 'Message',
type: 'textarea' }]
}](https://image.slidesharecdn.com/responsiveviewswithknockout-121015131622-phpapp02/85/Responsive-Views-with-Knockout-10-320.jpg)
Responsive Views with Knockout
- 1. Brian Dukes Engage RESPONSIVE VIEWS WITH KNOCKOUT
- 2. 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
- 3. Where Are You Taking Me Why Knockout What is Knockout How do I Knockout
- 4. Getting Truth out of the DOM Yehuda Katz – ember.js MVC & MVVM Frameworks
- 5. Goal Getting your data out of the DOM – Stop handling jQuery events
- 6. Prerequisites JavaScript HTML
- 7. Knockout is JavaScript JavaScript: The Good Parts – by Douglas Crockford JavaScript Enlightenment – by Cody Lindley – http://javascriptenlightenment.com/
- 8. Cleanliness “I don’t think Knockout is used (primarily) by devs that care much about keeping their javascript clean.” – Rob Conery
- 9. What is Knockout What are the features What does it look like
- 10. Scenario { formId: 1, title: 'Contact Form', questions: [{ title: 'Name', type: 'text' }, { title: 'Reason', type: 'dropdown', answers: ['Sales', 'Support'] }, { title: 'Message', type: 'textarea' }] }
- 11. Demo One Learn about: Data binding Task: Show the form title
- 12. Demo Two Learn about: Templating Task: List the questions
- 13. Demo Three Learn about: Observables Task: Edit question text
- 14. Demo Four Learn about: Dependency Tracking Task: Display answer input
- 15. How Do I Use Knockout In ASP.NET In DotNetNuke With a Database
- 16. Client Resource Management DNN 6.2 <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientRe sourceManagement" Assembly="DotNetNuke.Web.Client" %> <dnn:DnnJsInclude runat="server" FilePath="knockout.js" PathNameAlias="SharedScripts" />
- 17. How Do I Get the Model? Knockout.binding plugin JavaScript Serializer DNN Services Framework
- 18. How Do I Tell the Server About Updates? DNN Services Framework Serialize view model to hidden field Just manage existing ASP.NET control
- 19. Validation HTML 5 Validation ASP.NET Validation jQuery Validation is*Valid computed properties
- 20. Demo Five Fill it out
- 21. Resources http://learn.knockoutjs.com/ http://knockoutjs.com/
- 22. Conclusion JavaScript model DOM binding Code cleanliness Ease of development and organization
Editor's Notes
- #3: http://jsfiddle.net/bdukes/vndBJ/<h2 data-bind="text: title"></h2>ko.applyBindings(model, scope)
- #4: http://jsfiddle.net/bdukes/ZP6FM/<ol data-bind="foreach: questions"> <li data-bind="text: title"></li></ol>
- #5: http://jsfiddle.net/bdukes/uLfpx/<ol data-bind="foreach: questions"> <li> <label data-bind="attr: { for: 'q' + $index }"> Question: </label> <input data-bind="value: title, attr: { id: 'q' + $index }" /> </li></ol>title: ko.observable('Reason')
- #6: http://jsfiddle.net/bdukes/9XLnk/<ol data-bind="foreach: questions"> <li> <label data-bind="text: title, attr: { for: 'eq' + $index() }"></label> <!-- ko if: isText --> <input data-bind="attr: { id: 'eq' + $index() }" /> <!-- /ko --> <!-- ko if: isTextarea --> <textarea data-bind="attr: { id: 'eq' + $index() }"></textarea> <!-- /ko --> <!-- ko if: isDropdown --> <select data-bind="attr: { id: 'eq' + $index() }, options: answers"> </select> <!-- /ko --> </li></ol>isText: ko.computed(function () { return self.type() === 'text'; })