Your SlideShare is downloading. ×
  • Like
Knockout bindings
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Knockout bindings

  • 295 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
295
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
3
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. KnockoutJS勉強会 #1 in Kansai KnockoutJSのデータバインディングとか 14年1月18日土曜日
  • 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日土曜日
  • 17. 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日土曜日
  • 25. ありがとうございました! 14年1月18日土曜日