Knockout bindings
- 2. KnockoutJS #1 in Kansai
自己紹介
@tan_go238
PLUGRAM, Inc.
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 3. KnockoutJS #1 in Kansai
もくじ
・データバインディングてきな何か
・デザインパターンてきな何か
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 4. KnockoutJS #1 in Kansai
データバインディングてきな何か
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 5. KnockoutJS #1 in Kansai
データバインディングとは
以下略
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 6. KnockoutJS #1 in Kansai
参考資料 (ここ見ながらやってみてください)
作って分かるJavaScriptでデータバインド
http://bit.ly/1jbKRGV
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 7. KnockoutJS #1 in Kansai
これから話すことは
ぜんぶここに書いてます
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 8. KnockoutJS #1 in Kansai
きょうは、ここのブログの内容を
ざっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 9. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 10. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 11. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 12. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 13. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 14. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 15. KnockoutJS #1 in Kansai
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
っっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっっ
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 16. KnockoutJS #1 in Kansai
っくりかつ少し改変して話します!
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 18. KnockoutJS #1 in Kansai
subscribable
observable
dependencyDetection
dependencyObservable
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 19. KnockoutJS #1 in Kansai
subscribable
observable
通知する人
値を保持する人
dependencyDetection 依存関係を登録する人
dependencyObservable 値を保持する人
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日
- 20. 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');
})();
- 21. 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日土曜日
- 22. 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;
})();
- 23. 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
- 24. KnockoutJS #1 in Kansai
まとめ
KnockooutJSのソースコードは
すごい頭の体操になる
COPYRIGHT 2014 PLUGRAM, INC.
14年1月18日土曜日