An introduction to knockout.js

  • 2,281 views
Uploaded on

An introduction to the features of knockout.js

An introduction to the features of knockout.js

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,281
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
140
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. An introductionto Knockout.jsEmanuele Delbono@emadb
  • 2. Everyone loves jumping in muddy puddles
  • 3. Everyone loves jumping in muddy puddleswriting javascript code
  • 4. We write tons ofjavascript code
  • 5. I amWeb Developer inCodicePlastico. I have funwriting web apps in C#,Javascript and Ruby.
  • 6. Agenda• The MVVM Pattern• Welcome to Knockout• Binding basics• The features• Conclusions
  • 7. Presentationpatterns
  • 8. The MVVM patternModel ViewModel View
  • 9. ViewModel hasmethods too!
  • 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. Key features• Declarative binding• Automatic UI refresh• Templating• Dependency tracking
  • 12. Bidirectional DataBindingViewModel View
  • 13. Binding• data-bind attributes in HTML• ko.observable() for the properties• ko.applyBindings() to activate bindings
  • 14. Bindingvar viewModel = {message: ko.observable(Welcome)}<div data-bind="text: message"></div>
  • 15. Observable is a function!Don’t do this:viewModel.message = hiDo this:viewModel.message(hi)
  • 16. Code time
  • 17. Recap• Simple binding• Array binding• Computedproperties• Event binding• Conditionals• Templates• Subscriptions• Messagging• Contexts• Custom bindings• Virtual elements
  • 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. https://github.com/emadb/jsday13