Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KnockoutJS TechEd NA 2012

KnockoutJS TechEd NA 2012

John Papa

July 01, 2012

More Decks by John Papa

Other Decks in Technology


  1. data-bind Declarative Binding product: { id: 1001, model: ko.observable("Taylor 314ce"),

    salePrice: ko.observable(1199.95) } ko.applyBindings(data); Source object Bind Source to Target, & Vice Versa
  2. var myViewModel = { salesPerson: ko.observable("John"), empNum: ko.observable(39811), products: ko.observableArray([

    { model: "Taylor 314CE", price: 1749, id=321 }, { model: "Martin D40", price: 1899, id=479 } ]) }; <span data-bind="text: products().length"></span> Pre-populating Operating on observableArray
  3. enable value options value optionsText optionsValue Built into Knockout Binding

    for element attributes Multiple binding expressions
  4. attr checked click css disable enable event hasfocus html options

    optionsText optionsValue selectedOptions style submit text uniqueName value visible text value click disable enable attr Display and state bindings Text and value bindings Bindings for specific attributes visible event Event bindings
  5. • If truthy condition if • If falsy condition ifnot

    • Execute for each item in a list foreach • Shortcut to execute for the object with
  6. function(element, valueAccessor function(element, valueAccessor Runs first time the binding is

    evaluated Runs after init and every time one of its observables changes
  7. element, valueAccessor, allBindingsAccessor, viewModel valueAccessor element element, valueAccessor, allBindingsAccessor, viewModel

    valueAccessor element element Bound DOM element What is passed to the binding All other bindings on same element The viewmodel