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

1. Jan Maximilian Winther Kristiansen jmkristiansen.wordpress.com @jankristiansen jmk@steria.no

2. Introduction Pure javascript framework Published under the MIT license Compact size Easily integrated with existing code Supports all mainstream browsers

3. Key Concepts Declarative bindings Dependency tracking Templating Extensible MVVM-pattern

4. MVVM Pattern Consists of three parts Model: Defines the datastructure ViewModel: Adapts the model for presentation View: Presents the data in the UI

5. Declarative Bindings Uses data-binding attribute to bind to model Bindings for presentational use: visible, text, html, css, style, attr, template Bindings for user interface elements click, event, submit, enable, disable, value, checked, options, selectionOptions, uniqueName Compatible with older versions of HTML

6. Dependency Tracking Automatically keeps track of the changes in the model Automatically updates the user interface Tracking done through observable properties ko.observable(<type>); ko.observableArray(<array>);

7. Observable Properties Initialisation of observable properties name = ko.observable("Jan"); age = ko.observable(24); deceased = ko.observable(false); friends = ko.observableArray(["Ole", "Linn"]); Get'ers and set'ers are automatically generated for the property name() // prints "Jan"name("Jan Maximilian") // sets name to "Jan Maximilian"

8. Working with Observable Arrays Knockout provides helper functions push, pop, remove, removeAll, unshift, shift, reverse, sort, indexOf, splice, slice Supports native JavaScript Array functions myObservableArray.push(1); myObservableArray.indexOf(1); myObservableArray.remove(1);

9. The View Model The View Model consists of observable properties, variables and/or functions var viewModel = { <property> : <observableType>, … <property> : <variable>, … <property> : <function> }

10. Dependable Observable Properties Dependent on other observable properties Are automatically updated if there are changes Appended to the viewModel AFTER definiton viewModel.fullName = ko.dependentObservable(function() { return this.firstName() + " " + this.lastName(); }, viewModel);

11. Templating Uses jQuery Template syntax Has shorthands for more efficient rendering foreach Define templates in script tags with type = text/html id = the name of the template

12. Extensible Possible to create your own bindings Possible to change the templating engine

13. how to create an application?

14. 1. Import neccessary scripts

15. 2. Define a Model

16. 3. Define a viewmodel

17. 4. Apply Bindings

18. 5. Create Templates with Bindings

19. Demo

20. Sources http://www.knockoutjs.com/