作って分かるKnockoutJS@ALM11月
- 2. 自己紹介 KLab株式会社 エンジニア 上田拓也 Go, JavaScript, Java, twitter : @tenntenn PHP
- 3. アジェンダ ● KnockoutJSとは？ ● バインディングの仕組み ● 実装してみた
- 5. KnockoutJSとは？ ● JavaScriptのMVVMフレームワーク ○ MVVM: Model-View-ViewModel ● ViewModel(VM)とDOMの要素を双方向バイン ドする機能を提供する バインド ViewModel Element
- 6. KnockoutJSの特徴 ● コールバックが少なくなる ● 他のフレームワークと一緒に使える ○ 提供しているのはバインディングだけ ○ 既存のプロジェクトに投入しやすい（かも） ● 独自タグを使っていない ○ data-bind属性かコメントを使う ○ でもdata-bind属性が大きくなりすぎる ■ <div data-bind=”abind: avalue, cbind: cvalue,...”> ● 割りと重い ○ モバイル用途だと若干重い
- 7. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
- 8. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Foo”> <input value=”Bar”>
- 9. KnockoutJSの双方向バインド (1)ViewModel → Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
- 10. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Foo”> <input value=”Bar”>
- 11. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Foo’, lastName: ‘Bar’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
- 12. KnockoutJSの双方向バインド (2)ViewModel ← Element ViewModel { firstName: ‘Piyo’, lastName: ‘Hoge’ } Element バインド <input value=”Piyo”> <input value=”Hoge”>
- 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. いろいろなバインディング ● 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. カスタムバインド ● 独自バインドを作ることができる 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. 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. バインディングの仕組み
- 19. 対象とするもの ● ko.subscribable(ko.subscription) ● ko.observable ● ko.dependencyDetection ● ko.dependentObservable(ko. computed) http://jsfiddle.net/uedatakuya/9hS5n/
- 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 ⇒どういう仕組で動いているのか？
- 24. 実装してみた