Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Knockout bindings

876 views

Published on

Published in: Technology
  • Be the first to comment

Knockout bindings

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

×