Knockout handson

924 views

Published on

  • Be the first to comment

Knockout handson

  1. 1. KnockoutJS ハンズオン 14年5月12日月曜日
  2. 2. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Twitter :@tan_go238 言語 : Java、PHP 興味 : Curry 14年5月12日月曜日
  3. 3. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ハンズオンの流れ ・環境のセットアップ ・足し算アプリを作る ・TODOアプリを作る もくじ 14年5月12日月曜日
  4. 4. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 環境のセットアップ 14年5月12日月曜日
  5. 5. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14年5月12日月曜日
  6. 6. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. http://yeoman.io/ 14年5月12日月曜日
  7. 7. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Yeomanのインストール npm install -g yo npm install -g generator-webapp ※ Grunt と Bower も同時にインストールされます 14年5月12日月曜日
  8. 8. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ブランクプロジェクトを作成 mkdir knockout-handson cd knockout-handson yo webapp 14年5月12日月曜日
  9. 9. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ブランクプロジェクトを作成 14年5月12日月曜日
  10. 10. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ブランクプロジェクトを作成 grunt serve 起動! 14年5月12日月曜日
  11. 11. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJSをライブラリに追加 bower install knockoutjs --save cd bower_components/knockoutjs npm install ls build/output/ knockout-latest.debug.js knockout-latest.js 14年5月12日月曜日
  12. 12. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJSをライブラリに追加 # 一度プロジェクトのルートディレクトリに戻る cd ../../ # 好きなエディタで app/index.htmlを開く(以下は仮) edit app/index.html 14年5月12日月曜日
  13. 13. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJSをライブラリに追加 <!-- 55行目付近 --> <!-- build:js scripts/vendor.js --> <!-- bower:js --> <script src="../bower_components/jquery/dist/jquery.js"></script> <script src="../bower_components/knockoutjs/build/output/knockout-latest.js"> </script> <!-- endbower --> <!-- endbuild --> 14年5月12日月曜日
  14. 14. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. これで環境のセットアップは完了です 14年5月12日月曜日
  15. 15. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 足し算アプリを作る # 好きなエディタで app/index.html を開く(以下は仮) edit app/index.html HTML (app/index.html) 14年5月12日月曜日
  16. 16. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. <div class="container"> <div class="header"> <ul class="nav nav-pills pull-right"> <li class="active"><a href="#">Home</a></li> </ul> <h3 class="text-muted">knockout handson</h3> </div> <div class="row"> <div class="col-lg-12"> <p> <input data-bind="value:value1" type="text"/> + <input data-bind="value:value2" type="text"/> = <span data-bind="text:result"></span> </p> </div> </div> <div class="footer"> <p>We <span class="glyphicon glyphicon-heart"></span> KnockoutJS.</p> </div> </div> 14年5月12日月曜日
  17. 17. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 足し算アプリを作る # 好きなエディタで app/scripts/main.js を開く(以下は仮) edit app/scripts/main.js JavaScript (app/script/main.js) 14年5月12日月曜日
  18. 18. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. $(function () { function ViewModel() { var self = this; self.value1 = ko.observable(0); self.value2 = ko.observable(0); self.result = ko.computed(function () { return parseInt(self.value1()) + parseInt(self.value2()); }); } ko.applyBindings(new ViewModel()); }); 14年5月12日月曜日
  19. 19. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 足し算アプリを作る grunt serve 動かしてみる 14年5月12日月曜日
  20. 20. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.observable() 値の変更を監視します ・主にUIと同期するために使用 ko.observable ※  ko.observableArray()は後述 14年5月12日月曜日
  21. 21. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.computed(f) 利用しているko.observableの値が変わると実行される ko.computed ko.computed内で利用しているko.observable 14年5月12日月曜日
  22. 22. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. data-bind <input data-bind="value:value1" type="text"/> + <input data-bind="value:value2" type="text"/> = <span data-bind="text:result"></span> “value”  binding  は  <input>, <select>,  <textarea> のようなフォームの要素に使用する。 “text”  binding  は  <span>, <em> のような表示するための要素に使用する。 ※基本的に何でもイケル。number, string 以外の値を入れたら toString した値が表示される “visible”  ,  “style”  ,  “attr”  ,  “html”  ,  “css”  ,  “custom”  などの  binding  がある 14年5月12日月曜日
  23. 23. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.applyBindings(vm,node) <input data-bind="value:value1" type="text"/> + <input data-bind="value:value2" type="text"/> = <span data-bind="text:result"></span> function ViewModel() { var self = this; self.value1 = ko.observable(0); self.value2 = ko.observable(0); self.result = ko.computed(function () { return parseInt(self.value1()) + parseInt(self.value2()); }); } ko.applyBindings(new ViewModel()); 14年5月12日月曜日
  24. 24. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TODOアプリを作る 14年5月12日月曜日
  25. 25. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 画面を作る <div class="row"> <div class="col-lg-12"> <div class="input-group"> <input type="text" class="form-control"/> <span class="input-group-btn"> <button type="button" class="btn btn-info">Add</button> </span> </div> </div> <div class="col-lg-12"><h3>Task List</h3></div> <div class="col-lg-12"> <ul class="list-group"> <li class="list-group-item">1<a href="#" class="small pull-right">delete</a></li> <li class="list-group-item">2<a href="#" class="small pull-right">delete</a></li> </ul> </div> </div> index.html 14年5月12日月曜日
  26. 26. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 画面を作る 14年5月12日月曜日
  27. 27. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 画面を作る $(function () { function ViewModel() { var self = this; } ko.applyBindings(new ViewModel()); }); main.js 14年5月12日月曜日
  28. 28. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Addボタンのアクション追加 $(function () { function ViewModel() { var self = this; self.title = ""; self.addTask = function(){ alert(title) }; } ko.applyBindings(new ViewModel()); }); main.js <input type="text" class="form-control" data-bind="value: title"/> <button type="button" class="btn btn-info" data-bind="click: addTask">Add</button> index.html 14年5月12日月曜日
  29. 29. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Addボタンのアクション追加 14年5月12日月曜日
  30. 30. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskListに追加していく $(function () { function Task(title) { this.title = title; } function ViewModel() { var self = this; self.tasks = ko.observableArray([]); // 配列の変更を検知する self.title = ""; self.addTask = function () { var task = new Task(self.title); self.tasks.push(task); }; } ko.applyBindings(new ViewModel()); }); main.js 14年5月12日月曜日
  31. 31. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14年5月12日月曜日
  32. 32. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. (Chromeなら)Knockoutjs context debuggerを入れれば見れる 14年5月12日月曜日
  33. 33. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskListに追加していく <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="#" class="small pull-right">delete</a></li> </ul> </div> index.html 14年5月12日月曜日
  34. 34. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskListに追加していく 14年5月12日月曜日
  35. 35. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskListに追加していく こういう風にも書けます <!-- ko foreach: tasks --> <li class="list-group-item"> <span data-bind="text: title"></span> <a href="#" class="small pull-right">delete</a> </li> <!-- /ko --> “foreach”  binding  の他に “if” “ifnot” “with” があります。 14年5月12日月曜日
  36. 36. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. やってみよう 14年5月12日月曜日
  37. 37. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. やってみよう 14年5月12日月曜日
  38. 38. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. $(function () { 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); }; } ko.applyBindings(new ViewModel()); }); 14年5月12日月曜日
  39. 39. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. <div class="col-lg-12"> <ul class="list-group" data-bind="foreach: tasks"> <li class="list-group-item"> <span data-bind="text: title"></span> <a href="#" data-bind="click: $parent.deleteTask"          class="small pull-right">delete</a> </li> </ul> </div> $parent  ・・・親ViewModelオブジェクト その他にも $root  ・・・  最上位のコンテキストのViewModelオブジェクト $data  ・・・現在のコンテキストのViewModelオブジェクト $index  ・・・  foreachバインディング内で使用できる配列のインデックス 14年5月12日月曜日
  40. 40. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. このあと ・バリデーション追加とか ・sammy.js使うとか 14年5月12日月曜日
  41. 41. ありがとうございました! 14年5月12日月曜日

×