Slide 1
Slide 1 text
Knockout.js
Mayuki Sawatari (@mayuki)
Slide 2
Slide 2 text
About Me
Slide 3
Slide 3 text
Simplify dynamic JavaScript UIs by applying the Model-
View-ViewModel(MVVM)
Slide 4
Slide 4 text
Model View View
Model (ViewModel)
MVVM ugaya40
Knockout.js ViewModel View
Slide 5
Slide 5 text
Knockout.js
View
( HTML/DOM)
ViewModel
Model
(JavaScript )
Slide 6
Slide 6 text
Observable
MIT License
Slide 7
Slide 7 text
Seven Sanderson
ASP
.NET MVC
( )
Slide 8
Slide 8 text
Windows Azure
( )
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Knockout.js 2 1
observe ( ) + able ( )
Slide 12
Slide 12 text
var
Slide 13
Slide 13 text
ko.observable setter/getter
var
var //
//
Slide 14
Slide 14 text
function
this
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
function
this
// => 1
//
alert!
Slide 17
Slide 17 text
(Array)
ko.observable setter/getter
(push,pop )
var 'hoge' 'fuga'
var //
'hauhau' 'gaogao' //
'maumau' //
Slide 18
Slide 18 text
function
this
'hauhau' //
alert!
Slide 19
Slide 19 text
ko.computed observable
Slide 20
Slide 20 text
var ' '
var ' '
var function
return
// =>
'S' // value1 ’S’
// => S
Slide 21
Slide 21 text
subscribe
Slide 22
Slide 22 text
var ' ' //
var ' '
var function
return
function
// =>
' ' // observable
// ‘ ’
' ' //
// =>
Slide 23
Slide 23 text
ko.observable subscribe
ko.computed observable
getter setter
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Knockout.js 2 2
(ko.subscribable)
HTML DOM
data-bind
Slide 26
Slide 26 text
View Model JavaScript
function ViewModel () {
this.lastName = ko.observable(' ');
this.firstName = ko.observable(' ');
this.fullName = ko.computed(function () {
return this.lastName() + this.firstName();
}, this);
}
Slide 27
Slide 27 text
HTML
(data-bind )
div id target
input type text data-bind value: lastName
input type text data-bind value: firstName
span data-bind text: fullName /span
div
Slide 28
Slide 28 text
JavaScript
var new
'#target'
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
DOM
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
div data-bind myBinding: data div
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Knockout.js
Windows WinJS
Slide 35
Slide 35 text
No content