Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An introduction to knockout.js

An introduction to the features of knockout.js

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

    Be the first to comment

    Login to see the comments

  • acqualiofilizzata

    May. 22, 2013
  • gummyindustries

    Oct. 31, 2013
  • seijinoro

    Jan. 30, 2014
  • DemianFlavius

    Mar. 17, 2014
  • BharatPrajapati1312

    Apr. 23, 2014
  • fate7

    May. 19, 2014
  • shemeermali

    Jul. 8, 2014
  • shaileshband1

    Jan. 7, 2015

An introduction to the features of knockout.js

Views

Total views

5,101

On Slideshare

0

From embeds

0

Number of embeds

256

Actions

Downloads

260

Shares

0

Comments

0

Likes

8

×