Downloaded 10 times
![KnockoutJS入門
COPYRIGHT 2015 PLUGRAM, INC.
function Task(title) {
var self = this;
self.title = title;
}
function ViewModel() {
var self = this;
self.tasks = ko.observableArray([]);
self.title = ko.observable("");
self.addTask = function () {
var task = new Task(self.title());
self.tasks.push(task);
self.title("");
};
self.deleteTask = function(task) {
self.tasks.remove(task);
};
}
data-bind= click: addTask
data-bind= click: deleteTask
1715年1月26日月曜日](https://image.slidesharecdn.com/devloveknockout-150126051711-conversion-gate02/85/DevLOVE-Kansai-KnockoutJS-17-320.jpg)
DevLOVE Kansai KnockoutJS
- 1. DevLOVE関西∼ JavaScript フレームワークはAngular JS だけじゃない ∼ KnockoutJS入門 115年1月26日月曜日
- 2. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 自己紹介 @tan_go238 PLUGRAM, Inc. 仕事：PHP、JavaScript 趣味：JVM、Curry 215年1月26日月曜日
- 3. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 315年1月26日月曜日
- 4. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 415年1月26日月曜日
- 5. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 515年1月26日月曜日
- 6. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 話すこと ・KnockoutJS導入のきっかけ ・KnockoutJSの基本的な使い方 ・KnockoutJSでできないこと ・MVVMとは何か 615年1月26日月曜日
- 7. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJS導入のきっかけ jQueryで作ったら確実に破綻する機能の実装を頼まれる （2013年、画面数：2） 当時主流だったJSフレームワークを調査 KnockoutJSに辿り着く 715年1月26日月曜日
- 8. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJS導入のきっかけ 815年1月26日月曜日
- 9. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 必要条件 ・現在のサービスに影響なく追加できること ・レガシーブラウザ対応 ・入力フォームをPOSTでサーバへ送信( JSON) 十分条件 ・メンテナンスしやすい(UIとロジックの分離) ・テストできること（書きやすい） KnockoutJS導入のきっかけ 915年1月26日月曜日
- 10. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJS導入のきっかけ 当時主流だったJSフレームワークを調査 機能が多すぎるRouterいらん 1015年1月26日月曜日
- 11. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJS導入のきっかけ KnockoutJSに辿り着く テスト書ける 導入簡単 UIとロジックを分離できる レガシーブラウザ対応 1115年1月26日月曜日
- 12. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 必要条件 ・現在のサービスに影響なく追加できること ・レガシーブラウザ対応 (IE 6+, Firefox 3.5+) ・入力フォームをPOSTでサーバへ送信( JSON) 十分条件 ・メンテナンスしやすい(UIとロジックの分離) ・テストできること（書きやすい） KnockoutJS導入のきっかけ 1215年1月26日月曜日
- 13. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJSとは ・宣言的データバインディング ・UI自動更新 ・依存性追跡 ・テンプレート ・コンポーネント (3.2から) 1315年1月26日月曜日
- 14. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJSの使い方 ・data-bind (HTML：value, text, click など) ・observable ・observableArray ・pureComputed (computed) これだけ覚えれば基本はOK 1415年1月26日月曜日
- 15. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJSの使い方 (observable) <input type="text" data-bind="value: value1"/> + <input type="text" data-bind="value: value2"/> = <span data-bind="text: result"></span> <script src="js/knockout-latest.js"></script> <script src="js/page/index.js"></script> <script> $(function(){ ko.applyBindings(new ViewModel()); }); </script> function ViewModel(){ var self = this; self.value1 = ko.observable(1); self.value2 = ko.observable(2); self.result = ko.pureComputed(function(){ return parseInt(self.value1()) + parseInt(self.value2()); }); } 変更があったら通知 初期値 変更通知を受け取って実行 value1(observable) value2(observable) result (pureComputed) 1515年1月26日月曜日
- 16. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJSの使い方 (observableArray) <div class="col-lg-12"> <h3>Task List</h3> </div> <div class="col-lg-12"> <ul class="list-group" data-bind="foreach: tasks"> // foreachバインディング <li class="list-group-item"> <span data-bind="text: title"></span> <a href="#" data-bind="click: $parent.deleteTask">delete</a> </li> </ul> </div> 1615年1月26日月曜日
- 17. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. function Task(title) { var self = this; self.title = title; } function ViewModel() { var self = this; self.tasks = ko.observableArray([]); self.title = ko.observable(""); self.addTask = function () { var task = new Task(self.title()); self.tasks.push(task); self.title(""); }; self.deleteTask = function(task) { self.tasks.remove(task); }; } data-bind= click: addTask data-bind= click: deleteTask 1715年1月26日月曜日
- 18. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJSの使い方 (共通コンポーネント) <div class="col-lg-12"> <name-editor></name-editor> </div> ko.components.register('name-editor', { template: "<p>Enter your name: <input data-bind='value: name'/></p> <p>You entered <strong data-bind='text: name().toUpperCase()'> </strong></p>", viewModel: function() { this.name = ko.observable('something'); } }); 1815年1月26日月曜日
- 19. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. KnockoutJSでできないこと (機能比較) アーキテクチャ ルーティング バインディング 共通コンポーネント HTTP DI テスティング MVVM (ViewModel) MVW (Controller) なし (外部ライブラリを利用) angular-route data-bind=* ng-*, {{}} Components Directive なし (外部ライブラリを利用) $http なし $inject なし (外部ライブラリを利用) Karma, angular-mocks 1915年1月26日月曜日
- 20. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. ・簡単に覚えられる ・導入が楽 ・古いブラウザでも安心 ・共通化できる メリット ・機能が少ない ・制約が少ない ・無い機能は作る/他ライブラリを 利用しないといけない デメリット 今までのJS開発を崩さず楽したい人に非常にオススメ これまでのまとめ 2015年1月26日月曜日
- 21. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. これまでのまとめ ・簡単に覚えられる ・導入が楽 ・古いブラウザでも安心 ・共通化できる メリット ・機能が少ない ・制約が少ない ・無い機能は作る/他ライブラリを 利用しないといけない デメリット 大規模になってくるとデータフローがごちゃごちゃになる → MVVMやアーキテクチャの知識が必要 2115年1月26日月曜日
- 22. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. MVVMとはなにか http://ugaya40.hateblo.jp/entry/model-mistake MVVMのModelにまつわる誤解 ViewModelに公開するModelのインタフェース ・Modelのステートの公開とその変更通知 ・Modelの操作のための戻り値のないメソッド ViewModelとは ・ViewModelはModelの影 ・ViewはViewModelの影でもある 2215年1月26日月曜日
- 23. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. MVVMとはなにか V1 VM1 M1 M2V2 VM2 Mn 更新 変更通知自動更新 変更通知自動更新 show notification pop-up 2315年1月26日月曜日
- 24. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. MVVMとはなにか V1 VM1 M1 M2V2 VM2 Mn 更新 変更通知自動更新 状態更新通知 focus-in hide notification 2415年1月26日月曜日
- 25. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. Flux http://facebook.github.io/flux/docs/overview.html simple object ・new data ・type property ・state ・logic emit change_event 2515年1月26日月曜日
- 26. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. Flux http://facebook.github.io/flux/docs/overview.html 2615年1月26日月曜日
- 27. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. MVVMとFluxの違い MVVM Flux なし(明確に定義されてない) Action Model Dispatcher Model Store ViewModel View View なし (JSXで記述) ・Fluxは単方向のデータフローしか生じない ・FluxはMVVMのModelをより明確に定義している 2715年1月26日月曜日
- 28. KnockoutJS入門 COPYRIGHT 2015 PLUGRAM,INC. 最後に ・KnockoutJSは簡単に習得可能 ・既存プロジェクトへの導入も容易 ・古いブラウザでも安心 ・大規模(人数・View数・コード量)になるとデータフローの交通整理が必要 ・新規＆大規模プロジェクトにはあまりオススメしない KnockoutJS検討の際のポイント 2815年1月26日月曜日
- 29.