Responsive Views with Knockout

1,886 views

Published on

Knockout is a JavaScript library for creating incredibly responsive and interactive HTML. It uses a "data-binding" technique to declaratively associate HTML elements with a JavaScript object, so that changes made in one place are automatically made in the other. Change your name on the form, the name is changed in JavaScript. Perform a calculation in JavaScript, its results are automatically displayed on the page. This presentation will show some realistic examples of how to use Knockout in your everyday module development, and go over the pitfalls and gotchas that you may encounter, as well as show off some tips and tricks to use the library to its fullest.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,886
On SlideShare
0
From Embeds
0
Number of Embeds
313
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://jsfiddle.net/bdukes/vndBJ/<h2 data-bind="text: title"></h2>ko.applyBindings(model, scope)
  • http://jsfiddle.net/bdukes/ZP6FM/<ol data-bind="foreach: questions">  <li data-bind="text: title"></li></ol>
  • 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')
  • 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'; })
  • Responsive Views with Knockout

    1. 1. Brian DukesEngageRESPONSIVE VIEWS WITHKNOCKOUT
    2. 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. 3. Where Are You Taking Me Why Knockout What is Knockout How do I Knockout
    4. 4. Getting Truth out of the DOM Yehuda Katz – ember.js MVC & MVVM Frameworks
    5. 5. Goal Getting your data out of the DOM – Stop handling jQuery events
    6. 6. Prerequisites JavaScript HTML
    7. 7. Knockout is JavaScript JavaScript: The Good Parts – by Douglas Crockford JavaScript Enlightenment – by Cody Lindley – http://javascriptenlightenment.com/
    8. 8. Cleanliness“I don’t think Knockout is used (primarily) by devsthat care much about keeping their javascriptclean.”– Rob Conery
    9. 9. What is Knockout What are the features What does it look like
    10. 10. Scenario{ formId: 1, title: Contact Form, questions: [{ title: Name, type: text }, { title: Reason, type: dropdown, answers: [Sales, Support] }, { title: Message, type: textarea }]}
    11. 11. Demo One Learn about: Data binding Task: Show the form title
    12. 12. Demo Two Learn about: Templating Task: List the questions
    13. 13. Demo Three Learn about: Observables Task: Edit question text
    14. 14. Demo Four Learn about: Dependency Tracking Task: Display answer input
    15. 15. How Do I Use Knockout In ASP.NET In DotNetNuke With a Database
    16. 16. 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" />
    17. 17. How Do I Get the Model? Knockout.binding plugin JavaScript Serializer DNN Services Framework
    18. 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. 19. Validation HTML 5 Validation ASP.NET Validation jQuery Validation is*Valid computed properties
    20. 20. Demo Five Fill it out
    21. 21. Resources http://learn.knockoutjs.com/ http://knockoutjs.com/
    22. 22. Conclusion JavaScript model DOM binding Code cleanliness Ease of development and organization

    ×