KNOCKOUT.js
- or -
how I learned
to stop hating
- and -
love the markup
Slide 2
Slide 2 text
@appfog
console.appfog.com
built with knockout
@mattly
matthew lyon
Slide 3
Slide 3 text
console.appfog.com
Slide 4
Slide 4 text
console.appfog.com
Slide 5
Slide 5 text
MVVM
model view
viewmodel
a microsoft joint
Slide 6
Slide 6 text
MVP
model view
Presenter
a martin fowler joint
Slide 7
Slide 7 text
“
viewmodel
presenter
MVVM is identical to
Fowler’s presentation
model; both feature an
abstraction that contains
a view’s state & behavior
Josh Smith Microsoft MVP
Slide 8
Slide 8 text
{ name: “mattly”,
cats: 6,
hood: “king” }
model
Slide 9
Slide 9 text
view
Slide 10
Slide 10 text
vm.hood =
ko.observable(
model.hood
);
present
Slide 11
Slide 11 text
vm.cathood =
ko.computed(
Function (){
return cats() +
“ in ” + hood();
present
Slide 12
Slide 12 text
function move(){
cats(0);
hood(
“buckman”);
mediate
Slide 13
Slide 13 text
ko
.applybindings(
vm,
$(‘#me’)[0]
);
bind
Slide 14
Slide 14 text
it’s about
the
bindings
Slide 15
Slide 15 text
$(this)
.find(‘.cats’)
.text(int(cats))
bindings are not
jquery wankery
Slide 16
Slide 16 text
ele.innerhtml =
mustache(
tmpl, vars);
bindings are not
template rendering
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
bindings are
declarative
Slide 19
Slide 19 text
attr: property
event: handler
Slide 20
Slide 20 text
pub/sub
it’s
for your markup
Slide 21
Slide 21 text
hood
cats
cathood
Slide 22
Slide 22 text
attributes
forms
events
flow
Slide 23
Slide 23 text
visible
text
html
attributes
css {}
style {}
attr {}
Slide 24
Slide 24 text
attributes
Slide 25
Slide 25 text
value
enable disable
checked options
selectedOptions
forms