A LOOK AT KNOCKOUT JS Kyle Retzer ROADMAP

  • Slides: 9
Download presentation
A LOOK AT KNOCKOUT. JS Kyle Retzer

A LOOK AT KNOCKOUT. JS Kyle Retzer

ROADMAP What is knockout? MVVM What does knockout bring to the table? Demonstration Why

ROADMAP What is knockout? MVVM What does knockout bring to the table? Demonstration Why use knockout? Questions?

WHAT IS KNOCKOUT? Java. Script library Create Uis for editing JSON data Elegant way

WHAT IS KNOCKOUT? Java. Script library Create Uis for editing JSON data Elegant way to implement MVVM pattern

MVVM (MODEL-VIEWMODEL) Model § Persisted data § Independent of UI § Objects and operations

MVVM (MODEL-VIEWMODEL) Model § Persisted data § Independent of UI § Objects and operations in business domain View § HTML document § Represents View Model state View Model § Not persisted data model or UI (think client-side model) § Holds unsaved data

WHAT DOES KNOCKOUT BRING Declarative bindings § Associate DOM elements with model data Automatic

WHAT DOES KNOCKOUT BRING Declarative bindings § Associate DOM elements with model data Automatic UI refresh § Model update UI update Dependency tracking § Relationships between model data

BINDINGS AND DEPENDENCY TRACKING Declare data “observable” Associate data with a DOM element Computed

BINDINGS AND DEPENDENCY TRACKING Declare data “observable” Associate data with a DOM element Computed observables HTML Java. Script

LET’S SEE IT IN ACTION Hello World § http: //jsfiddle. net/rniemeyer/Lkq. TU/ A few

LET’S SEE IT IN ACTION Hello World § http: //jsfiddle. net/rniemeyer/Lkq. TU/ A few more behaviors § http: //jsfiddle. net/rniemeyer/a. Dah. T/ Custom bindings § http: //jsfiddle. net/rniemeyer/8 k 8 V 5/

WHY KNOCKOUT? Pure Java. Script § Works anywhere Small § ~13 kb Works on

WHY KNOCKOUT? Pure Java. Script § Works anywhere Small § ~13 kb Works on any mainstream browser No major changes to existing architecture

Questions?

Questions?

Knockout Mouse Project KOMP and Knockout Mouse ProductionKnockout Mouse Project KOMP and Knockout Mouse Production
Knockout Concentrator knockout switch 8 x 8 MultistageKnockout Concentrator knockout switch 8 x 8 Multistage
GENE KNOCKOUT 1 INTRODUCTION A gene knockout isGENE KNOCKOUT 1 INTRODUCTION A gene knockout is
May 24 2012 Ann Bevitt Karin Retzer MiriamMay 24 2012 Ann Bevitt Karin Retzer Miriam
NORTHWEST MOUNTAIN MINORITY SUPPLIER DEVELOPMENT COUNCIL RICHARD RETZERNORTHWEST MOUNTAIN MINORITY SUPPLIER DEVELOPMENT COUNCIL RICHARD RETZER
Look left right Look up look down LookLook left right Look up look down Look
Look Up Look Down Look Back Look ForwardLook Up Look Down Look Back Look Forward
Look up look down Look up look downLook up look down Look up look down