Knockout.jsの概要

Knockout.jsの概要 (3つのMVC系人気フレームワーク、Backbone.js／AngularJS／Knockout.js) - Build Insider Offline #1

Sample Code: http://mayuki.github.io/Sample/BuildInsiderOffline-1/
PDF: http://sdrv.ms/11qcEWc
PowerPoint: http://sdrv.ms/15GZzfu

Transcript

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