Knockout bindings

KnockoutJS勉強会 #1 in Kansai

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

14年1月18日土曜日

KnockoutJS #1 in Kansai

自己紹介

@tan_go238
PLUGRAM, Inc.

COPYRIGHT 2014 PLUGRAM, INC.



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




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




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

以下略




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

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

http://bit.ly/1jbKRGV



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




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




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




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



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



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



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


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



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




登場人物？




subscribable
observable
dependencyDetection
dependencyObservable




subscribable
observable

通知する人

値を保持する人

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




subscribable

sub

通知する人

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

scrib

subscriptionA

noti
fySu
bscr

e(fu
nc)

ipto

rs()

subscribable

subscriptionB

Output

※イメージです


// 通知がきたら、ログに出力する
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');
})();


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で通知



ソース
// 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,
})();

// 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;
})();


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)

※イメージです


Output


まとめ

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



ありがとうございました！


Knockout bindings

More Related Content

More from Go Tanaka

Knockout bindings