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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Knockout bindings

341

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
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日土曜日

×