Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Knockout_エンジニア勉強会20131120
Similar to Knockout_エンジニア勉強会20131120 (20)
More from エンジニア勉強会 エスキュービズム
More from エンジニア勉強会 エスキュービズム (20)
Recently uploaded
Recently uploaded (9)
Knockout_エンジニア勉強会20131120
- 1. 2013.11.20
- 7. とは？ ○ リッチでレスポンシブなUIを提供 ○ クライアントサイドの JSフレームワーク ○ MVVMで実現 ○ 他のライブラリに依存関係を持たない
- 8. コンセプト ○ Declarative binding ○ Automatic UI reflesh ○ Elegant dependency tracking
- 10. jQuery ~~~~~js~~~~~ var count = 3; for(i=1; i<=count; i++){ $(“#string” + i).text(“test” + i); } ~~~~~html~~~~~ <div class=”xxx”> <div id=”string1”></div> <div id=”string2”></div> <div id=”string3”></div> </div> 複雑化 このへんが するとツライ。 DOM操作 タ設置 初期化 セレク ト登録 ベン イ
- 11. ~~~~~js~~~~~ ko.applyBindings(new function(){ var self = this; self.strings = ko.observableArray([ {item: ‘test1’}, {item: ‘test2’}, {item: ‘test3’}, ]); }); Automatic UI refresh Declarative binding ~~~~~html~~~~~ <div data-bind=”foreach: strings” class=”xxx”> <div data-bind=”text: item”><div> </div> シンプルで柔軟。 しかも早い。
- 16. MVVM ○ Model ビジネスロジック、永続的データ保持 ○ View テンプレート、UI I/O ○ View-Model データバインディング、モデルとのコミュニケーション
- 17. MVVM よくわからない。
- 18. MVVM View ViewModel Model http://www.slideshare.net/emadb/an-introduction-to-knockoutjs-21281153
- 19. MVVM では?
- 20. http://adampurkiss.com/knockout-remoting/ w/ Automatic UI refresh w/ Dependency tracking w/ Ajax
- 23. observables ○ コア技術 1. data binding - View Modelの定義 2. observable - automatic UI Refresh 3. computed observables - dependency tracking
- 24. observables 1. data binding ~~~~~js~~~~~ // View Modelの作成 var viewModel = { name: ko.observable(‘my name’); } // data binding ko.applyBindings(viewModel); ~~~~~html~~~~~ // View <div data-bind=”text: name”></div> View Modelを Viewに バインディング！
- 25. observables 2. observables ~~~~~js~~~~~ // View Modelの作成 var viewModel = { name: ko.observable(‘my name’); } // data binding ko.applyBindings(viewModel); ~~~~~html~~~~~ // View <div data-bind=”text: name”></div> nameの変化を 自動的に Viewへ通知！
- 26. observables 3. computed observables ~~~~~js~~~~~ // View Modelの作成 var viewModel = { name1: ko.observable(‘my name’); name2: ko.observable(‘my name’); name1, name2 どちらか変更されれば、 fullNameも更新される！ fullName: ko.computed(function(){ return this.name1() + ‘:’ + this.name2(); }, this); } // data binding ko.applyBindings(viewModel); dependency tracking
- 30. observables ○ ko.observable ko.observable(‘test name’); ○ ko.observableArray ko.observableArray([ { item: 1}, { item: 2}, { item: 3}, { item: 4} ]);
- 31. ViewModel (1/2) ○ Object Literal var viewModel = { name1: ko.observable(‘my name1’); name2: ko.observable(‘my name2’); } viewModel.fullName = ko.computed(function(){ return this.name1() + ‘:’ + this.name2(); }, viewModel); ko.applyBindings(viewModel);
- 32. ViewModel (2/2) ○ function function fnViewModel(){ var self = this; self.name1 = ko.observable(‘my name1’); self.name2 = ko.observable(‘my name2’); self.fullname = ko.computed(function(){ return self.name1() + ‘:’ + self.name2(); }); } ko.applyBindings(new fnViewModel());
- 33. Fluent Interface var viewModel = { name1: ko.observable(); name2: ko.observable(); } viewModel.name1(‘my name1’).name2(‘my name2’); viewModel
- 34. Activating var viewModel = { name1: ko.observable(); name2: ko.observable(); } // 全ての要素にActivate ko.applyBindings(viewModel); // 指定した要素にActivate ko.applyBindings(viewModel, $(“#activeId”));
- 35. Built-in Bindings (text) ○ text <div data-bind=”text: content”></div> ○ html <div data-bind=”html: content”></div>
- 36. Built-in Bindings (appearance) ○ visible <div data-bind=”visible: hasContents”></div> ○ css <div data-bind=”css: { class: hasContents }”></div> ○ style <div data-bind=”style: { color: contentColor }”></div> ○ attr <div data-bind=”attr: { src: contentImageUrl }”></div>
- 37. Built-in Bindings (event) ○ click <a href=”#” data-bind=”click: clickAction”>link</div> ○ event <div data-bind=”event: { mouseover: eventAction }”></div> ○ submit <div data-bind=”submit: submitAction”></div>
- 38. Built-in Bindings (Control) ○ foreach <ul data-bind=”foreach: arrayList”> <div data-bind=”text: name”></div> </ul> ○ if <div data-bind=”if: isError”>Error!!</div> ○ with <div data-bind=”with: parentContents”> <div data-bind=”text: name”> </div> ko.applyBindings({ parentName: ‘xxxx’, parentContents: { name: ‘test name’, hobby: ‘footsal’ } });
- 39. Built-in Bindings (Forms) ○ value <input type=”text” data-bind=”value: name” /> ○ checked <input type=”radio” data-bind=”checked: isChecked” /> ○ options <select data-bind=”options: categories”></select> ...and more
- 40. Custom bindings ○ バインディングを自由に拡張 <div data-bind=”myBinding: name”></div>
- 41. Custom bindings ○ custom bindingsを定義 ko.bindingHandlers.myBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 初期化、イベントハンドラの登録など }, 指定の View Model update: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 値が変化した時に行う処理 } }; DOM要素 バインディングさ れたアクセッサ 全てのバインディング定 義のアクセッサ
- 42. Loading and Saving data ココ
- 43. Loading and Saving data サーバサイドとの依存性はない http://api.jquery.com/category/ajax/
- 44. Loading and Saving data var viewModel = { firstName : ko.observable("Bert"), lastName : ko.observable("Smith"), pets : ko.observableArray(["Cat", "Dog", "Fish"]), type : "Customer" }; var jsonData = ko.toJSON(viewModel); $.post("/some/url", jsonData, function(returnedData) { // something to do ~~~~ })
- 45. Loading and Saving data $.getJSON("/some/url", function(data) { var parsed = JSON.parse(data); // Update view model properties viewModel.firstName(parsed.firstName); viewModel.lastName(parsed.lastName); }) 複雑なView Modelになると 手入力がめんどくさい
- 46. Mapping plugin View Model更新時の処理を隠蔽 オブジェクトを突っ込んでマッピングすれば楽 // Update view model properties viewModel.firstName(parsed.firstName); viewModel.lastName(parsed.lastName); …………….. これが var viewModel = ko.mapping.fromJS(data); ko.mapping.fromJS(data, viewModel); こうなる
- 48. upgrade notes 2010-07-10: v1.0.0 2011-12-21: v2.0.0 2013-07-09: v2.3.0 2013-10-25: v3.0.0 (latest!!) https://github.com/knockout/knockout
- 49. v3.0.0 upgrade notes ○ ko.computed()のパフォーマンス最適化 【before】 依存のある値に変更通知が飛んだ時 計算結果が全く同じ場合でも処理が走っていた 【after】 入力された値が同じ場合は、再計算しない fullName: ko.computed(function(){ return this.name1() + ‘:’ + this.name2(); }, this);
- 50. v3.0.0 upgrade notes ○ ko.computed()のパフォーマンス最適化 明示的に毎回更新処理を走らせたい場合は.... obj.extend({ notify: ‘always’}); でOK！
- 51. v3.0.0 upgrade notes ○ 更新の独立性 <input type=”checkbox” data-bind=”visible: showTerms, checked: acceptsTerms ”/> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ showTerms の変更 ⇒ checkedの更新 + visibleもreturnされる・・
- 53. v3.0.0 upgrade notes ○ 更新の独立性 ので、 独立した更新 を行うようにしたそうです。 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ <input type=”checkbox” data-bind=”visible: showTerms, checked: acceptsTerms “/>
- 56. angular.js に近い用途 ~~~~~~~ knockout.js~~~~~~~ <div data-bind=”text: name”></div> ~~~~~~~ angular.js~~~~~~~ {{name}}
- 60. Knockback.js Both Knockout.js and Backbone.js have their strengths and weaknesses, but together they are amazing! With Knockback.js, you can use the strong ORM provided by Backbone and create dynamic views using Knockout bindings. http://kmalakoff.github.io/knockback/
- 62. まとめ ○ の説明しました
- 64. ありがとうございました。