Your SlideShare is downloading. ×
0
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
Knockout handson
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 handson

381

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
381
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
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 ハンズオン 14年5月12日月曜日
  • 2. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Twitter :@tan_go238 言語 : Java、PHP 興味 : Curry 14年5月12日月曜日
  • 3. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ハンズオンの流れ ・環境のセットアップ ・足し算アプリを作る ・TODOアプリを作る もくじ 14年5月12日月曜日
  • 4. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 環境のセットアップ 14年5月12日月曜日
  • 5. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14年5月12日月曜日
  • 6. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. http://yeoman.io/ 14年5月12日月曜日
  • 7. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Yeomanのインストール npm install -g yo npm install -g generator-webapp ※ Grunt と Bower も同時にインストールされます 14年5月12日月曜日
  • 8. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ブランクプロジェクトを作成 mkdir knockout-handson cd knockout-handson yo webapp 14年5月12日月曜日
  • 9. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ブランクプロジェクトを作成 14年5月12日月曜日
  • 10. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ブランクプロジェクトを作成 grunt serve 起動! 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. KnockoutJSをライブラリに追加 # 一度プロジェクトのルートディレクトリに戻る cd ../../ # 好きなエディタで app/index.htmlを開く(以下は仮) edit app/index.html 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. これで環境のセットアップは完了です 14年5月12日月曜日
  • 15. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 足し算アプリを作る # 好きなエディタで app/index.html を開く(以下は仮) edit app/index.html HTML (app/index.html) 14年5月12日月曜日
  • 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. 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. 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 足し算アプリを作る grunt serve 動かしてみる 14年5月12日月曜日
  • 20. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.observable() 値の変更を監視します ・主にUIと同期するために使用 ko.observable ※  ko.observableArray()は後述 14年5月12日月曜日
  • 21. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. ko.computed(f) 利用しているko.observableの値が変わると実行される ko.computed ko.computed内で利用しているko.observable 14年5月12日月曜日
  • 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. 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TODOアプリを作る 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 画面を作る 14年5月12日月曜日
  • 27. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 画面を作る $(function () { function ViewModel() { var self = this; } ko.applyBindings(new ViewModel()); }); main.js 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. Addボタンのアクション追加 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. 14年5月12日月曜日
  • 32. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. (Chromeなら)Knockoutjs context debuggerを入れれば見れる 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. TaskListに追加していく 14年5月12日月曜日
  • 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. やってみよう 14年5月12日月曜日
  • 37. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. やってみよう 14年5月12日月曜日
  • 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. 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. Knockout Hands-on COPYRIGHT 2014 PLUGRAM, INC. このあと ・バリデーション追加とか ・sammy.js使うとか 14年5月12日月曜日
  • 41. ありがとうございました! 14年5月12日月曜日

×