20140712 knockoutjs-hands-on-in-osaka

778
-1

Published on

20140712 knockoutjs-hands-on-in-osaka
Knockout + JavaScript + TypeScript

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

  • Be the first to like this

No Downloads
Views
Total Views
778
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20140712 knockoutjs-hands-on-in-osaka

  1. 1. KnockoutJS Hands-On Visual Studio Knockoutjs勉強会の内容 初心者向けJavaScript入門からテラ・コーディングまで!JavaScript フレームワークの主流、MVVMアーキテクチャパターンを採用してい るKnockoutJSを堪能する!Sencha Ext JSのMVVMもやります! 1 http://atnd.org/events/51279 大阪
  2. 2. この資料の場所2 http://www.slideshare.net/seijinoro/20140712- knockoutjshandsoninosaka http://urx.nu/a39R
  3. 3. 自己紹介  名前 : 野呂清二  Twitter : @seinoro  Facebook : seiji.noro  言語 :C#, JavaScript (C++, Java)  Microsoft MVP for Office365  <http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro- 5000492> 3
  4. 4. 参考文献  Knockout handson  http://www.slideshare.net/tanago3/knockout- handson  Knockout 日本語ドキュメント  http://kojs.sukobuto.com/ 4
  5. 5. ハンズオンの流れ  環境のセットアップ  足し算アプリを作る  TODOアプリを作る  TypeScript+knockoutJS 5
  6. 6. 環境のセットアップ6 Setup
  7. 7. 7 Setup
  8. 8. Visual Studioのインストール  Visual Studio 2013 90 日間の無償評価版  http://www.visualstudio.com/ja-jp/downloads/download- visual-studio-vs.aspx Microsoft Visual Studio Professional 2013 Update 2 Microsoft Visual Studio Express 2013 for Webでも可能と思われる。 8 Setup
  9. 9. ①ファイル/新規作成/プロジェクト ②Visual C#/Web/ASP.NET Webアプリケーション ③MVC/④認証なし ② 9 Setup 新規プロジェクト作成 ③ ④ クラウド内のホスト チェック外す
  10. 10. KnockoutJSインストール ①ツール/Nugetパッケージマネジャー/ソリューションのNuGetパッケージの管理 ②Knockoutjs インストール ② 10 Setup オンライン KnockoutJS
  11. 11. 確認 以下のようにKnockout.js が組み込まれています。 ① 11 Setup Scriptsフォルダー
  12. 12. 足し算アプリを作る12 足し算
  13. 13. ソースプログラム  Knockout.js で足し算アプリ (Visual Studio2013)  http://tech.exceedone.co.jp/javascript/visualstudio-2013- mvc5-with-twitterbootstrap-caluculate/ 13 足し算
  14. 14. HTML (/Views/Home/index.cshtml) 14 足し算
  15. 15. JavaScript (/Scripts/test.js) 15 足し算
  16. 16. デバック(F5)で動かしてみる。 ※F9でブレイクポイント 足し算 16
  17. 17. 実行結果 足し算 17
  18. 18. ko.observable() 値の変更を監視します ・主にUIと同期するために使用 ※ko.observableArray()は後述 ko.observable 足し算 18
  19. 19. ko.computed(f) 利用しているko.observableの値が変わると 実行される ko.computed内で利用しているko.observable ko.computed 足し算 19
  20. 20. data-bind “value” binding は <input>, <select>, <textarea>のようなフォーム要素に使用 する。 “text” binding は <span>, <em> のような表示するための要素に使用する。 ※基本的に何でもイケル。 number, string 以外の値をいれたら toString した値が表示される “visible”, “style”, “attr”, “html”, “css”, “custom” などのbinding がある 足し算 20
  21. 21. ko.applyBindings(vm,node) 足し算 21
  22. 22. TODOアプリを作る22 Todo
  23. 23. ソースプログラム  Knockout.js でTodoアプリ (Visual Studio2013  http://tech.exceedone.co.jp/javascript/visualstudio-2013- mvc5-with-twitterbootstrap-todos/ Todo 23
  24. 24. HTML (/Views/Home/index.cshtml)24 Todo
  25. 25. JavaScript (/Scripts/test.js) 25 Todo
  26. 26. 実行結果 Todo 26
  27. 27. Addボタンのアクション追加27 Todo Index.cshtml test.js
  28. 28. 実行結果28 Todo
  29. 29. TaskListに追加する29 Todo test.js
  30. 30. TaskListに追加する30 Index.cshtml foreachバインディング Todo
  31. 31. 実行結果31 Todo
  32. 32. deleteボタンの アクション追加 32 Todo test.js
  33. 33. deleteボタンの アクション追加 33 Index.cshtml $parent: 親ViewModelオブジェクト その他にも $root: 最上位のコンテキストのViewModelオブジェクト $data: 現在のコンテキストのViewModelオブジェクト $index: foreachバインディング内で使用できる配列のインデックス Todo
  34. 34. TypeScript+KnockoutJS34 TypeScript
  35. 35. ソースプログラム  TypeScript+KnockoutJSアプリ (Visual Studio2013)  http://tech.exceedone.co.jp/javascript/typescript- knockoutjs-visual-studio2013/ 35 TypeScript
  36. 36. Knockout.js 日本語ドキュメント を参考につくってみましょう。 36 http://kojs.sukobuto.com/tips/withTypeScript TypeScript
  37. 37. Web Essentialsを可能なら インストール 37 http://visualstudiogallery.msdn.microsoft.com /56633663-6799-41d7-9df7-0f2a504ca361 TypeScript
  38. 38. Web Essentialsインストール38 ①ツール-拡張機能と更新プログラム ② TypeScript
  39. 39. TypeScriptとJavaScriptが 同時に確認できます。 39 TypeScript JavaScript TypeScript
  40. 40. ①ファイル/新規作成/プロジェクト ②Visual C#/TypeScript/TypeSciptを使用したHTMLアプリケーショ ② 40 新規プロジェクト作成 TypeScript
  41. 41. 実行(F5)すると サンプルが起動する。 41 もちろんデバックもできます。 typescript definitelytypescript definitely TypeScript
  42. 42. KnockoutJS等をインストール  NuGet パッケージ管理  Knockoutjs  GitHub  knockout-es5 https://github.com/SteveSanderson/knockout-es5 右側のDownload ZIP/ distの中のファイルを追加 42 TypeScript
  43. 43. typescript definitelyを インストール(t.ds)  knockout.es5.TypeScript.DefinitelyTyped  依存 knockout.TypeScript.DefinitelyTyped 43 TypeScript
  44. 44. Index.htmlにソースを張る。 44 JSはドラック &ドロップできます。 TypeScript
  45. 45. app.tsを編集する 45 d.tsはドラック &ドロップできます。 TypeScript
  46. 46. デバック(F5)してみる46 TypeScript
  47. 47. 時間が余ったら47
  48. 48. 時間が余ったら  くつろぐ、knockout等で回りの人と談話する。  周りでできてない人のHelp  他の課題(準備できていたら)  以下をみてみるとか  SPA(Single Page Application) for knockout.js + TwitterBootstrap + Sammy.js + SQL Azure + Visual Studio2013  http://tech.exceedone.co.jp/javascript/visualstudio- 2013-mvc5-with-twitterbootstrap-knockout-spa/ 48
  49. 49. 補足 デバックについて49
  50. 50. Internet Explorer Google Chromeはブレイクポイントはとまりません。 50
  51. 51. .cshtmlでのデバック cshtmlでは、ブレイクポイントはとまりませんので debuggerと入力します。 51
  52. 52. .jsでのデバック .js ブレイクポイントはとまります。 52
  53. 53. ありがとうございました!!53
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×