An introduction to knockout.js

3,981 views
3,723 views

Published on

An introduction to the features of knockout.js

Published in: Technology, Business

An introduction to knockout.js

  1. 1. An introductionto Knockout.jsEmanuele Delbono@emadb
  2. 2. Everyone loves jumping in muddy puddles
  3. 3. Everyone loves jumping in muddy puddleswriting javascript code
  4. 4. We write tons ofjavascript code
  5. 5. I amWeb Developer inCodicePlastico. I have funwriting web apps in C#,Javascript and Ruby.
  6. 6. Agenda• The MVVM Pattern• Welcome to Knockout• Binding basics• The features• Conclusions
  7. 7. Presentationpatterns
  8. 8. The MVVM patternModel ViewModel View
  9. 9. ViewModel hasmethods too!
  10. 10. What is Knockoutjs?“Knockout is a JavaScript library that helps youto create rich, responsive display and editor userinterfaces with a clean underlying data model.Any time you have sections of UI that updatedynamically [...], KO can help you implement itmore simply and maintainably.”http://knockoutjs.com
  11. 11. Key features• Declarative binding• Automatic UI refresh• Templating• Dependency tracking
  12. 12. Bidirectional DataBindingViewModel View
  13. 13. Binding• data-bind attributes in HTML• ko.observable() for the properties• ko.applyBindings() to activate bindings
  14. 14. Bindingvar viewModel = {message: ko.observable(Welcome)}<div data-bind="text: message"></div>
  15. 15. Observable is a function!Don’t do this:viewModel.message = hiDo this:viewModel.message(hi)
  16. 16. Code time
  17. 17. Recap• Simple binding• Array binding• Computedproperties• Event binding• Conditionals• Templates• Subscriptions• Messagging• Contexts• Custom bindings• Virtual elements
  18. 18. Conclusions• KO is small focused on binding• Very low learning curve• Focused on databinding (no routing,model synchronization, etc...)• Lots documentation• Could be hard on big pages
  19. 19. https://github.com/emadb/jsday13

×