Your SlideShare is downloading. ×
Knockout
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Knockout

2,025
views

Published on

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

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,025
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
133
Comments
0
Likes
3
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. 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/