KnockoutJS TechEd NA 2012

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

With and Without Knockout

Slide 3

Slide 3 text

UI Patterns Data & Bindings Separation of Concerns Structured JavaScript

Slide 4

Slide 4 text

6+ 2+ Separates behavior and structure Declarative bindings Observables

Slide 5

Slide 5 text

data-bind="value: firstName" Declarative Binding ko.observable ko.applyBindings Create an Observable Bind the ViewModel to the View http://jsfiddle.net/johnpapa/BEzJc/

Slide 6

Slide 6 text

Source object Push from Source to Target

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

With and Without Knockout Observable

Slide 9

Slide 9 text

Taylor 110 Taylor 914ce Taylor 914ce Taylor 110

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

With and Without Knockout Observable Computed

Slide 13

Slide 13 text

computed dependentObservable

Slide 14

Slide 14 text

ko.computed this this.qty vm observables owner

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

With and Without Knockout Observable Computed ObservableArray

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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 } ]) }; Pre-populating Operating on observableArray

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

With and Without Knockout Observable Computed ObservableArray Built In Bindings

Slide 21

Slide 21 text

enable value options value optionsText optionsValue Built into Knockout Binding for element attributes Multiple binding expressions

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates

Slide 25

Slide 25 text

• If truthy condition if • If falsy condition ifnot • Execute for each item in a list foreach • Shortcut to execute for the object with

Slide 26

Slide 26 text

template: {name: 'productsTmpl', foreach: lines} Pass the context for the template with “foreach” productsTmpl

Slide 27

Slide 27 text

if: lines().length > 0 Any “truthy” expression

Slide 28

Slide 28 text

with: model text: brand text: name

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

All Part of the Native Template Engine in Knockout

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates Custom Binding Handlers

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

function(element, valueAccessor function(element, valueAccessor Runs first time the binding is evaluated Runs after init and every time one of its observables changes

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

With and Without Knockout Observable Computed ObservableArray Built In Bindings Templates

Slide 38

Slide 38 text

JavaScript: The Developer Experience (DEV308) JavaScript: The Language (DEV307)

Slide 39

Slide 39 text

http://www.microsoft.com/visualstudio/en-us http://blogs.msdn.com/b/jasonz/ http://www.facebook.com/visualstudio http://twitter.com/#!/visualstudio Somasegar’s Blog http://blogs.msdn.com/b/somasegar/

Slide 40

Slide 40 text

http://northamerica.msteched.com www.microsoft.com/learning http://microsoft.com/technet http://microsoft.com/msdn