Knockout

2,450 views

Published on

An introduction to the awesome client-side JavaScript framework Knockout. It was held for the Microsoft department at Steria Norway.

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

No Downloads
Views
Total views
2,450
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
139
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Knockout

  1. 1. Jan Maximilian Winther Kristiansen<br />jmkristiansen.wordpress.com<br />@jankristiansen<br />jmk@steria.no<br />
  2. 2. Introduction<br />Pure javascript framework<br />Published under the MIT license<br />Compact size<br />Easily integrated with existing code<br />Supports all mainstream browsers<br />
  3. 3. Key Concepts<br />Declarative bindings<br />Dependency tracking<br />Templating<br />Extensible<br />MVVM-pattern<br />
  4. 4. MVVM Pattern<br />Consists of three parts<br />Model: Defines the datastructure<br />ViewModel: Adapts the model for presentation<br />View: Presents the data in the UI<br />
  5. 5. Declarative Bindings<br />Uses data-binding attribute to bind to model<br />Bindings for presentational use:<br />visible, text, html, css, style, attr, template<br />Bindings for user interface elements<br />click, event, submit, enable, disable, value, checked, options, selectionOptions, <br />uniqueName<br />Compatible with older versions of HTML<br />
  6. 6. Dependency Tracking<br />Automatically keeps track of the changes in the model<br />Automatically updates the user interface<br />Tracking done through observable properties<br />ko.observable(<type>); ko.observableArray(<array>);<br />
  7. 7. Observable Properties<br />Initialisation of observable properties<br />name = ko.observable("Jan");<br />age = ko.observable(24);<br />deceased = ko.observable(false);<br />friends = ko.observableArray(["Ole", "Linn"]);<br />Get'ers and set'ers are automatically generated for the property<br />name() // prints "Jan"name("Jan Maximilian") // sets name to "Jan Maximilian"<br />
  8. 8. Working with Observable Arrays<br />Knockout provides helper functions<br />push, pop, remove, removeAll, unshift, shift, reverse, sort, indexOf, splice, slice<br />Supports native JavaScript Array functions<br /> myObservableArray.push(1);<br />myObservableArray.indexOf(1);<br />myObservableArray.remove(1);<br />
  9. 9. The View Model<br />The View Model consists of observable properties, variables and/or functions<br />var viewModel = {<br /> <property> : <observableType>,<br />…<br /><property> : <variable>,<br />…<br /><property> : <function><br />}<br />
  10. 10. Dependable Observable Properties<br />Dependent on other observable properties<br />Are automatically updated if there are changes<br />Appended to the viewModel AFTER definiton<br />viewModel.fullName = ko.dependentObservable(function() {<br /> return this.firstName() + " " + this.lastName();<br />}, viewModel);<br />
  11. 11. Templating<br />Uses jQuery Template syntax<br />Has shorthands for more efficient rendering<br />foreach<br />Define templates in script tags with<br />type = text/html<br />id = the name of the template<br />
  12. 12. Extensible<br />Possible to create your own bindings<br />Possible to change the templating engine<br />
  13. 13. how to create an application?<br />
  14. 14. 1. Import neccessary scripts<br />
  15. 15. 2. Define a Model<br />
  16. 16. 3. Define a viewmodel<br />
  17. 17. 4. Apply Bindings<br />
  18. 18. 5. Create Templates with Bindings<br />
  19. 19. Demo<br />
  20. 20. Sources<br />http://www.knockoutjs.com/<br />

×