Download to read offline
Uploaded bySeiji Noro
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka Knockout + JavaScript + TypeScript
More Related Content
20140712 knockoutjs-hands-on-in-osaka
- 1. KnockoutJS Hands-On Visual Studio Knockoutjs勉強会の内容 初心者向けJavaScript入門からテラ・コーディングまで！JavaScript フレームワークの主流、MVVMアーキテクチャパターンを採用してい るKnockoutJSを堪能する！SenchaExt JSのMVVMもやります！ 1 http://atnd.org/events/51279 大阪
- 2.
- 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
- 6.
- 7.
- 8. Visual Studioのインストール VisualStudio 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.
- 10.
- 11.
- 12.
- 13. ソースプログラム Knockout.js で足し算アプリ(Visual Studio2013) http://tech.exceedone.co.jp/javascript/visualstudio-2013- mvc5-with-twitterbootstrap-caluculate/ 13 足し算
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. data-bind “value” binding は<input>, <select>, <textarea>のようなフォーム要素に使用 する。 “text” binding は <span>, <em> のような表示するための要素に使用する。 ※基本的に何でもイケル。 number, string 以外の値をいれたら toString した値が表示される “visible”, “style”, “attr”, “html”, “css”, “custom” などのbinding がある 足し算 20
- 21.
- 22.
- 23. ソースプログラム Knockout.js でTodoアプリ(Visual Studio2013 http://tech.exceedone.co.jp/javascript/visualstudio-2013- mvc5-with-twitterbootstrap-todos/ Todo 23
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. deleteボタンの アクション追加 33 Index.cshtml $parent: 親ViewModelオブジェクト その他にも $root: 最上位のコンテキストのViewModelオブジェクト $data:現在のコンテキストのViewModelオブジェクト $index: foreachバインディング内で使用できる配列のインデックス Todo
- 34.
- 35. ソースプログラム TypeScript+KnockoutJSアプリ (VisualStudio2013) http://tech.exceedone.co.jp/javascript/typescript- knockoutjs-visual-studio2013/ 35 TypeScript
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 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
- 44.
- 45.
- 46.
- 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.
- 50.
- 51.
- 52.
- 53.