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

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/