作って分かるKnockoutJS@ALM11月

1,994 views
1,739 views

Published on

社内勉強会で発表したスライドです。

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,994
On SlideShare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
14
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

作って分かるKnockoutJS@ALM11月

  1. 1. 作って分かる KnockoutJS 2013/11/19(火) @ALM 11月
  2. 2. 自己紹介 KLab株式会社 エンジニア 上田拓也 Go, JavaScript, Java, twitter : @tenntenn PHP
  3. 3. アジェンダ ● KnockoutJSとは? ● バインディングの仕組み ● 実装してみた
  4. 4. KnockoutJSとは?
  5. 5. KnockoutJSとは? ● JavaScriptのMVVMフレームワーク ○ MVVM: Model-View-ViewModel ● ViewModel(VM)とDOMの要素を双方向バイン ドする機能を提供する バインド ViewModel Element
  6. 6. KnockoutJSの特徴 ● コールバックが少なくなる ● 他のフレームワークと一緒に使える ○ 提供しているのはバインディングだけ ○ 既存のプロジェクトに投入しやすい(かも) ● 独自タグを使っていない ○ data-bind属性かコメントを使う ○ でもdata-bind属性が大きくなりすぎる ■ <div data-bind=”abind: avalue, cbind: cvalue,...”> ● 割りと重い ○ モバイル用途だと若干重い
  7. 7. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
  8. 8. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Foo”> <input value=”Bar”>
  9. 9. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
  10. 10. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
  11. 11. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
  12. 12. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
  13. 13. KnockoutJSの使用例 ■HTML <input data-bind=”value:firstName”> <input data-bind=”value:lastName”> ■JavaScript var vm = { firstName: ko.observable(“Foo”), lastName: ko.observable(“Bar”) }; ko.applyBindings(vm, document.body); http://jsfiddle.net/uedatakuya/ma43x/
  14. 14. いろいろなバインディング ● cssバインド <div data-bind=”css: {error, isError}”></div> ● if/ifnotバインド <!-- ko if: ok -->OK<!-- /ko--> ● foreachバインド <ol data-bind=”foreach: items”> <li data-bind=”text:$data.name”></li> </ol> http://knockoutjs.com/documentation/introduction.html
  15. 15. カスタムバインド ● 独自バインドを作ることができる ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { } } <div data-bind=”yourBindingName: someValue”></div> http://knockoutjs.com/documentation/custom-bindings.html
  16. 16. ko.computed (ko.dependentObservable) ● 他observable(subscribable)に依存した observableを作れる var a = ko.observable(100); var c = ko.obaervable(200); var c = ko.computed(function() { return a() + b(); }); console.log(a(), b(), c()); // 100, 200, 300 ⇒どういう仕組で動いているのか?
  17. 17. バインディングの仕組み
  18. 18. バインディングの仕組み ● KnockoutJSのバインディングの仕組 みをソースコードを読んでみて理解する
  19. 19. 対象とするもの ● ko.subscribable(ko.subscription) ● ko.observable ● ko.dependencyDetection ● ko.dependentObservable(ko. computed) http://jsfiddle.net/uedatakuya/9hS5n/
  20. 20. ko.subscribable ko.subscribable -----------------------------+subscribe() +notifySubscripters() ko.observable ko.dependentObservable (ko.computed) http://jsfiddle.net/uedatakuya/9hS5n/
  21. 21. ko.computed (ko.dependentObservable) ● 他observable(subscribable)に依存した observableを作れる var a = ko.observable(100); var c = ko.obaervable(200); var c = ko.computed(function() { return a() + b(); }); console.log(a(), b(), c()); // 100, 200, 300 ⇒どういう仕組で動いているのか?
  22. 22. ko.observable(ko.subscribable) ko.observable (ko.subscribable) subscripter subscript Write notifySubscripters callback http://jsfiddle.net/uedatakuya/9hS5n/
  23. 23. ko.dependenctyDetectionと ko.dependentObservable ko. dependentObserva ble Init ko. dependencyDet ection ko.subscribable evaluateImediate begin Read registerDependency callback <依存関係に追加> end http://jsfiddle.net/uedatakuya/9hS5n/
  24. 24. 実装してみた
  25. 25. 実装してみた ● さらに簡単に実装してみて理解する ● エラー処理や難しいことは省く http://jsfiddle.net/uedatakuya/9hS5n/
  26. 26. 【解説】実装してみた ● https://gist.github. com/tenntenn/7540535 ● http://jsfiddle. net/uedatakuya/9hS5n/

×