An introduction to knockout.js
Upcoming SlideShare
Loading in...5
×
 

An introduction to knockout.js

on

  • 2,709 views

An introduction to the features of knockout.js

An introduction to the features of knockout.js

Statistics

Views

Total Views
2,709
Views on SlideShare
2,625
Embed Views
84

Actions

Likes
7
Downloads
112
Comments
0

4 Embeds 84

http://librosweb.es 58
https://twitter.com 18
http://hi-tech.leonardo.it 6
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

An introduction to knockout.js An introduction to knockout.js Presentation Transcript

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