Knockout bindings
-
Upload
go-tanaka -
Category
Technology
-
view
393 -
download
3
Transcript of Knockout bindings
KnockoutJS勉強会 #1 in Kansai
KnockoutJSのデータバインディングとか
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
自己紹介
@tan_go238
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.
参考資料 (ここ見ながらやってみてください)
作って分かるJavaScriptでデータバインド
http://bit.ly/1jbKRGV
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
COPYRIGHT 2014 PLUGRAM, INC.
subscribable
observable
dependencyDetection
dependencyObservable
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
subscribable
observable
dependencyDetection
dependencyObservable
通知する人
値を保持する人
依存関係を登録する人
値を保持する人
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
subscribable 通知する人
subscribable
subscriptionA
subscriptionB
subscribe(func)notifySubscriptors()
// Test(function () { // 継承 var subscribable = {}; go.extend(go.subscribable, subscribable);
// 通知がきたら、ログに出力する 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');})();
Output
※イメージです
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
(subscribable)
subscriptionA
subscriptionB
subscribe(func)notifySubscriptors()
observable 値を保持する人
observable
observableはsubscribeの機能をもつ
値を保持し変更があればnotifyで通知
// 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');
var observableB = go.observable('hoge'); observableB.subscribe(function(){ go.log("B",observableB()); }); observableB('barrr'); observableB('foooo');})();
Output
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
// 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;})();
// 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;})();
ソース
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
(subscribable)
dependantObservableC
1.computed() -> observableA()
-> observableB()
3. dependantObservableCは
observableA,Bの通知登録するobservableA
dependencyDetection 依存関係を登録する人
(subscribable)
observableB
dependencyDetection
2. registerDependen
cy2. registerDependency
dependencyObservable 値を保持する人
※イメージです
// 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());})();
Output
dependencyDetectionが依存関係登録依頼を受け取り
dependantObservableにobservableA,Bの通知登録をさせる
14年1月18日土曜日
KnockoutJS #1 in Kansai
COPYRIGHT 2014 PLUGRAM, INC.
まとめ
KnockooutJSのソースコードは
すごい頭の体操になる
14年1月18日土曜日
ありがとうございました!
14年1月18日土曜日