作って分かるKnockoutJS@ALM11月

  • 1,018 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,018
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 作って分かる KnockoutJS 2013/11/19(火) @ALM 11月
  • 2. 自己紹介 KLab株式会社 エンジニア 上田拓也 Go, JavaScript, Java, twitter : @tenntenn PHP
  • 3. アジェンダ ● KnockoutJSとは? ● バインディングの仕組み ● 実装してみた
  • 4. 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. バインディングの仕組み
  • 18. バインディングの仕組み ● KnockoutJSのバインディングの仕組 みをソースコードを読んでみて理解する
  • 19. 対象とするもの ● ko.subscribable(ko.subscription) ● ko.observable ● ko.dependencyDetection ● ko.dependentObservable(ko. computed) http://jsfiddle.net/uedatakuya/9hS5n/
  • 20. ko.subscribable ko.subscribable -----------------------------+subscribe() +notifySubscripters() ko.observable 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 ⇒どういう仕組で動いているのか?
  • 22. ko.observable(ko.subscribable) ko.observable (ko.subscribable) subscripter subscript Write notifySubscripters callback http://jsfiddle.net/uedatakuya/9hS5n/
  • 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. 実装してみた
  • 25. 実装してみた ● さらに簡単に実装してみて理解する ● エラー処理や難しいことは省く http://jsfiddle.net/uedatakuya/9hS5n/
  • 26. 【解説】実装してみた ● https://gist.github. com/tenntenn/7540535 ● http://jsfiddle. net/uedatakuya/9hS5n/