• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Knockout js (Dennis Haney)
 

Knockout js (Dennis Haney)

on

  • 395 views

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update ...

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.
KO provides a complementary, high-level way to link a data model to a UI.

Statistics

Views

Total Views
395
Views on SlideShare
395
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

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

    Knockout js (Dennis Haney) Knockout js (Dennis Haney) Presentation Transcript

    • Knockout JS Basics & Beyond
    • Why? Oh Why? • I HATE JavaScript • At least in the first ~10 years of existence • Then came jQuery in '06 • Which helped for the next ~5-7 years • Then came Knockout JS (and html5)
    • Demo: Why Plain JavaScript Sucks http://jsfiddle.net/Cine/9Kk3R/
    • Who am I • Dennis Haney • Master in Computer Science from the Copenhagen University of Computer Science DIKU (Denmark) • Been in Vietnam since 2006 • 15+ years programming professionally
    • What does KO fix? HTML is back in control of layout JavaScript is a helper, not the leader Declarative binding Templating When I update X... Then value displayed is also updated Dependency tracking Bi-directional data binding
    • Demo: What Does KnockoutJS Fix http://jsfiddle.net/Cine/n2W6w/1/
    • Data-Binding data-bind attributes in HTML Declarative binding Templating observable for the properties Dependency tracking Bi-directional data binding ko.applyBindings() to activate bindings
    • Presentation Patterns
    • Simplified JS ViewModel HTML View
    • Demo: Two Way Binding http://jsfiddle.net/Cine/YVUwZ/
    • 3 kinds of observable v = ko.observable(“value”) To update do v(“new”), not v = “new” a = ko.observableArray([1,2,3]) Feels like native array An observableArray tracks which objects are in the array, not the state of those objects ko.computed(function() { return “value”; }) Automatic dependency tracking
    • Demo: Observables http://jsfiddle.net/Cine/Fys9C/
    • Dependency tracking firstName lastName fullName
    • Demo: Observables Expanded http://jsfiddle.net/Cine/45GLk/
    • Bindings Controlling text and appearance The visible binding The text binding The html binding The css binding The style binding The attr binding Control flow The foreach binding The if binding The ifnot binding The with binding
    • Bindings Working with form fields The click binding The event binding The submit binding The enable binding The disable binding The value binding The hasFocus binding The checked binding The options binding The selectedOptions binding The uniqueName binding Rendering templates The template binding
    • Remember Load jQuery BEFORE KnockoutJS Otherwise events won't work properly Observables are FUNCTIONS, not plain values Remember both when reading and writing
    • Advanced Knockout
    • Virtual Elements Data-bind does not require an actual element to bind to in some cases (foreach, if etc.) http://jsfiddle.net/Cine/8QMJC/ Very useful if you DON'T want some parent element
    • Validation jQuery validation works well with http://jsfiddle.net/Cine/NxvNh/ Remember to use uniqueName binding jQuery Validation requires validation targets to have unique names
    • Custom bindings Can make new bindings that does whatever you want http://jsfiddle.net/Cine/4JZsA/
    • Extenders Expand how a observable works http://jsfiddle.net/Cine/7nJRQ/2/ Can use as log, trigger, enforcer or anything else you can come up with Only 1 built-in extender: throttle
    • Value converters Computed observables support “write” http://jsfiddle.net/Cine/2r2x4/ Can use as Value Converter, complex validation or as in the example a simple decomposition into multiple other fields
    • Questions? Dennis Haney davh@davh.dk http://knockoutjs.com/documentation/introduction.html
    • About us Author: Dennis Haney Find me at: davh@davh.dk Presentation made for JavaScript HCMC Meetup You can find us at: http://www.meetup.com/JavaScript-Ho-Chi-Minh-City/ https://www.facebook.com/JavaScriptHCMC?ref=hl https://plus.google.com/communities/116105314977285194967