KnockoutJS勉強会 #1 in Kansai

KnockoutJSのデータバインディングとか

14年1月18日土曜日
KnockoutJS #1 in Kansai

自己紹介

@tan_go238
PLUGRAM, Inc.

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

もくじ
・データバインディングてきな何か
・デザインパターンてきな何か

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

データバインディングてきな何か

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

データバインディングとは

以下略

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

参考資料 (ここ見ながらやってみてください)

作って分かるJavaScriptでデータバインド

http://bit.ly/1jbKRGV
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

これから話すことは
ぜんぶここに書いてます

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

きょうは、ここのブログの内容を
ざっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

っくりかつ少し改変して話します!

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

登場人物?

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

subscribable
observable
dependencyDetection
dependencyObservable

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

subscribable
observable

通知する人

値を保持する人

dependencyDetection 依存関係を登録する人
dependencyObservable 値を保持する人

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

subscribable

sub

通知する人

// Test
(function () {
// 継承
var subscribable = {};
go.extend(go.subscribable, subscribable);

scrib

subscriptionA

noti
fySu
bscr

e(fu
nc)

ipto

rs()

subscribable

subscriptionB

Output

※イメージです
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日

// 通知がきたら、ログに出力する
var subscriptionA = subscribable.subscribe(function (value) {
go.log("A:"+value);
});
var subscriptionB = subscribable.subscribe(function (value) {
go.log("B:"+value);
});
// subscripterに'hoge'を通知する
subscribable.notifySubscripters('hoge');
})();
KnockoutJS #1 in Kansai

observable 値を保持する人

sub

// Test
(function () {
var observableA = go.observable('hoge'); // 初期値
var count = 0;
var subscriptionA = observableA.subscribe(function () {
count++;
go.log("A",observableA(), count);
});
observableA('foo');
observableA('foo');
observableA('bar');

scrib

subscriptionA

noti
fySu
bscr

e(fu
nc)

ipto

rs()

observable
(subscribable)

subscriptionB

var observableB = go.observable('hoge');
observableB.subscribe(function(){
go.log("B",observableB());
});
observableB('barrr');
observableB('foooo');
})();

Output
observableはsubscribeの機能をもつ
値を保持し変更があればnotifyで通知
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
KnockoutJS #1 in Kansai

ソース
// subscribable
(function () {
var subscribable = {
_subscriptions: [],
subscribe: function (callback, callbackTarget) {
var _subscribable = this;
var subscription = {
callback: callbackTarget? callback.bind(callbackTarget) : callback,
dispose: function () {
this.isDisposed = true;
for (var i = 0; i < _subscribable._subscriptions.length; i++) {
if (_subscribable._subscriptions[i] === this) {
_subscribable._subscriptions.splice(i, 1);
break;
}
}
},
isDisposed: false
};
this._subscriptions.push(subscription);
return subscription;
},
notifySubscripters: function (valueToNotify) {
var _subscriptions = this._subscriptions.slice(0);
for (var i = 0; i < _subscriptions.length; i++) {
var subscription = _subscriptions[i];
if (subscription && (subscription.isDisposed !== true)) {
subscription.callback(valueToNotify);
}
}
}
};
go.subscribable = subscribable; INC.
COPYRIGHT 2014 PLUGRAM,
})();
14年1月18日土曜日

// observable
(function () {
var observable = function (initialValue) {
var lastValue = initialValue;
function observable() {
if (arguments.length > 0) {
// write
var newValue = arguments[0];
if (newValue !== lastValue) {
lastValue = newValue;
observable.notifySubscripters(lastValue);
}
} else {
// read
return lastValue;
}
}
go.extend(go.subscribable, observable);
return observable;
};
go.observable = observable;
})();
KnockoutJS #1 in Kansai

dependencyDetection 依存関係を登録する人
dependencyObservable 値を保持する人
dependencyDetectionが依存関係登録依頼を受け取り
dependantObservableにobservableA,Bの通知登録をさせる

1.co

mpu
ted(
) ->
obs
-> o ervable
bser
A()
vab
leB(
dependantObservableC
)

3. dependantObservableCは

observableA

observableA,Bの通知登録する

(subscribable)
e

nd
pe
De

y
nc

er

ist
eg
.r

2

// Test
(function () {
var observableA = go.observable(100);
var observableB = go.observable(200);
var dependantObservableC = go.computed(function () {
return observableA() + observableB();
});
go.log(observableA(), observableA(), dependantObservableC());
observableA(400);
go.log(observableA(), observableB(), dependantObservableC());
})();

ency

epend
gisterD
. re

2

dependencyDetection

observableB
(subscribable)

※イメージです
COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日

Output
KnockoutJS #1 in Kansai

まとめ

KnockooutJSのソースコードは
すごい頭の体操になる

COPYRIGHT 2014 PLUGRAM, INC.

14年1月18日土曜日
ありがとうございました!

14年1月18日土曜日

Knockout bindings

  • 1.
    KnockoutJS勉強会 #1 inKansai KnockoutJSのデータバインディングとか 14年1月18日土曜日
  • 2.
    KnockoutJS #1 inKansai 自己紹介 @tan_go238 PLUGRAM, Inc. COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 3.
    KnockoutJS #1 inKansai もくじ ・データバインディングてきな何か ・デザインパターンてきな何か COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 4.
    KnockoutJS #1 inKansai データバインディングてきな何か COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 5.
    KnockoutJS #1 inKansai データバインディングとは 以下略 COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 6.
    KnockoutJS #1 inKansai 参考資料 (ここ見ながらやってみてください) 作って分かるJavaScriptでデータバインド http://bit.ly/1jbKRGV COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 7.
    KnockoutJS #1 inKansai これから話すことは ぜんぶここに書いてます COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 8.
    KnockoutJS #1 inKansai きょうは、ここのブログの内容を ざっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 9.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 10.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 11.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 12.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 13.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 14.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 15.
    KnockoutJS #1 inKansai っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 16.
    KnockoutJS #1 inKansai っくりかつ少し改変して話します! COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 17.
    KnockoutJS #1 inKansai 登場人物? COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 18.
    KnockoutJS #1 inKansai subscribable observable dependencyDetection dependencyObservable COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 19.
    KnockoutJS #1 inKansai subscribable observable 通知する人 値を保持する人 dependencyDetection 依存関係を登録する人 dependencyObservable 値を保持する人 COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 20.
    KnockoutJS #1 inKansai subscribable sub 通知する人 // Test (function () { // 継承 var subscribable = {}; go.extend(go.subscribable, subscribable); scrib subscriptionA noti fySu bscr e(fu nc) ipto rs() subscribable subscriptionB Output ※イメージです COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日 // 通知がきたら、ログに出力する var subscriptionA = subscribable.subscribe(function (value) { go.log("A:"+value); }); var subscriptionB = subscribable.subscribe(function (value) { go.log("B:"+value); }); // subscripterに'hoge'を通知する subscribable.notifySubscripters('hoge'); })();
  • 21.
    KnockoutJS #1 inKansai observable 値を保持する人 sub // Test (function () { var observableA = go.observable('hoge'); // 初期値 var count = 0; var subscriptionA = observableA.subscribe(function () { count++; go.log("A",observableA(), count); }); observableA('foo'); observableA('foo'); observableA('bar'); scrib subscriptionA noti fySu bscr e(fu nc) ipto rs() observable (subscribable) subscriptionB var observableB = go.observable('hoge'); observableB.subscribe(function(){ go.log("B",observableB()); }); observableB('barrr'); observableB('foooo'); })(); Output observableはsubscribeの機能をもつ 値を保持し変更があればnotifyで通知 COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 22.
    KnockoutJS #1 inKansai ソース // subscribable (function () { var subscribable = { _subscriptions: [], subscribe: function (callback, callbackTarget) { var _subscribable = this; var subscription = { callback: callbackTarget? callback.bind(callbackTarget) : callback, dispose: function () { this.isDisposed = true; for (var i = 0; i < _subscribable._subscriptions.length; i++) { if (_subscribable._subscriptions[i] === this) { _subscribable._subscriptions.splice(i, 1); break; } } }, isDisposed: false }; this._subscriptions.push(subscription); return subscription; }, notifySubscripters: function (valueToNotify) { var _subscriptions = this._subscriptions.slice(0); for (var i = 0; i < _subscriptions.length; i++) { var subscription = _subscriptions[i]; if (subscription && (subscription.isDisposed !== true)) { subscription.callback(valueToNotify); } } } }; go.subscribable = subscribable; INC. COPYRIGHT 2014 PLUGRAM, })(); 14年1月18日土曜日 // observable (function () { var observable = function (initialValue) { var lastValue = initialValue; function observable() { if (arguments.length > 0) { // write var newValue = arguments[0]; if (newValue !== lastValue) { lastValue = newValue; observable.notifySubscripters(lastValue); } } else { // read return lastValue; } } go.extend(go.subscribable, observable); return observable; }; go.observable = observable; })();
  • 23.
    KnockoutJS #1 inKansai dependencyDetection 依存関係を登録する人 dependencyObservable 値を保持する人 dependencyDetectionが依存関係登録依頼を受け取り dependantObservableにobservableA,Bの通知登録をさせる 1.co mpu ted( ) -> obs -> o ervable bser A() vab leB( dependantObservableC ) 3. dependantObservableCは observableA observableA,Bの通知登録する (subscribable) e nd pe De y nc er ist eg .r 2 // Test (function () { var observableA = go.observable(100); var observableB = go.observable(200); var dependantObservableC = go.computed(function () { return observableA() + observableB(); }); go.log(observableA(), observableA(), dependantObservableC()); observableA(400); go.log(observableA(), observableB(), dependantObservableC()); })(); ency epend gisterD . re 2 dependencyDetection observableB (subscribable) ※イメージです COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日 Output
  • 24.
    KnockoutJS #1 inKansai まとめ KnockooutJSのソースコードは すごい頭の体操になる COPYRIGHT 2014 PLUGRAM, INC. 14年1月18日土曜日
  • 25.