20140712 knockoutjs-hands-on-in-osaka
•Transferir como PPTX, PDF•
1 gostou•1,467 visualizações
20140712 knockoutjs-hands-on-in-osaka Knockout + JavaScript + TypeScript
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a 20140712 knockoutjs-hands-on-in-osaka
Semelhante a 20140712 knockoutjs-hands-on-in-osaka (20)
Mais de Seiji Noro
Mais de Seiji Noro (20)
Último
Último (10)
20140712 knockoutjs-hands-on-in-osaka
- 1. KnockoutJS Hands-On Visual Studio Knockoutjs勉強会の内容 初心者向けJavaScript入門からテラ・コーディングまで！JavaScript フレームワークの主流、MVVMアーキテクチャパターンを採用してい るKnockoutJSを堪能する！Sencha Ext JSのMVVMもやります！ 1 http://atnd.org/events/51279 大阪
- 2. この資料の場所2 http://www.slideshare.net/seijinoro/20140712- knockoutjshandsoninosaka http://urx.nu/a39R
- 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. 参考文献 Knockout handson http://www.slideshare.net/tanago3/knockout- handson Knockout 日本語ドキュメント http://kojs.sukobuto.com/ 4
- 5. ハンズオンの流れ 環境のセットアップ 足し算アプリを作る TODOアプリを作る TypeScript+knockoutJS 5
- 7. 7 Setup
- 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
- 12. 足し算アプリを作る12 足し算
- 13. ソースプログラム Knockout.js で足し算アプリ (Visual Studio2013) http://tech.exceedone.co.jp/javascript/visualstudio-2013- mvc5-with-twitterbootstrap-caluculate/ 13 足し算
- 17. 実行結果 足し算 17
- 19. ko.computed(f) 利用しているko.observableの値が変わると 実行される ko.computed内で利用しているko.observable ko.computed 足し算 19
- 20. data-bind “value” binding は <input>, <select>, <textarea>のようなフォーム要素に使用 する。 “text” binding は <span>, <em> のような表示するための要素に使用する。 ※基本的に何でもイケル。 number, string 以外の値をいれたら toString した値が表示される “visible”, “style”, “attr”, “html”, “css”, “custom” などのbinding がある 足し算 20
- 23. ソースプログラム Knockout.js でTodoアプリ (Visual Studio2013 http://tech.exceedone.co.jp/javascript/visualstudio-2013- mvc5-with-twitterbootstrap-todos/ Todo 23
- 26. 実行結果 Todo 26
- 28. 実行結果28 Todo
- 31. 実行結果31 Todo
- 33. deleteボタンの アクション追加 33 Index.cshtml $parent: 親ViewModelオブジェクト その他にも $root: 最上位のコンテキストのViewModelオブジェクト $data: 現在のコンテキストのViewModelオブジェクト $index: foreachバインディング内で使用できる配列のインデックス Todo
- 35. ソースプログラム TypeScript+KnockoutJSアプリ (Visual Studio2013) http://tech.exceedone.co.jp/javascript/typescript- knockoutjs-visual-studio2013/ 35 TypeScript
- 42. KnockoutJS等をインストール NuGet パッケージ管理 Knockoutjs GitHub knockout-es5 https://github.com/SteveSanderson/knockout-es5 右側のDownload ZIP/ distの中のファイルを追加 42 TypeScript
- 43. typescript definitelyを インストール(t.ds) knockout.es5.TypeScript.DefinitelyTyped 依存 knockout.TypeScript.DefinitelyTyped 43 TypeScript
- 47. 時間が余ったら47
- 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
- 53. ありがとうございました！！53