1. KnockoutJS
Hands-On Visual Studio
Knockoutjs勉強会の内容
初心者向けJavaScript入門からテラ・コーティングまで！JavaScript
フレームワークの主流、MVVMアーキテクチャパターンを採用してい
るknockoutjsを堪能する！
1
http://atnd.org/events/50026

2. 自己紹介
 名前 : 野呂清二
 Twitter : @seinoro
 Facebook : seiji.noro
 言語 :C#, JavaScript (C++, Java)
 Microsoft MVP for Office365
 <http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro-
5000492>
2

3. 参考文献
 Knockout handson
 http://www.slideshare.net/tanago3/knockout-
handson
 Knockout 日本語ドキュメント
 http://kojs.sukobuto.com/
3

4. ハンズオンの流れ
 環境のセットアップ
 足し算アプリを作る
 TODOアプリを作る
4

5. 環境のセットアップ5
Setup

6. 6
Setup

7. 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でも可能と思われる。
7
Setup

8. 新規プロジェクト作成
①ファイル/新規作成/プロジェクト
②Visual C#/Web/ASP.NET Webアプリケーション
③MVC/④認証なし
②
③
④
8
Setup

9. KnockoutJSインストール
①ﾂｰﾙ/ﾗｲﾌﾞﾗﾘｰﾊﾟｯｹｰｼﾞﾏﾈｼﾞｬｰ/ｿﾘｭｰｼｮﾝのNuGetﾊﾟｯｹｰｼﾞの管理
②Knockoutjs インストール
②
9
Setup

10. 確認
以下のようにKnockout.js が組み込まれています。
①
10
Setup

11. 足し算アプリを作る11
足し算

12. ソースプログラム
 Knockout.js で足し算アプリ (Visual Studio2013)
 http://tech.exceedone.co.jp/javascript/visualstudio-2013-
mvc5-with-twitterbootstrap-caluculate/
12
足し算

13. HTML
(/Views/Home/index.cshtml)
13
足し算

14. JavaScript
(/Scripts/test.js)
14
足し算

15. デバック(F5)で動かしてみる。
※F9でブレイクポイント
足し算
15

16. 実行結果
足し算
16

17. ko.observable()
値の変更を監視します
・主にUIと同期するために使用
※ko.observableArray()は後述
ko.observable
足し算
17

18. ko.computed(f)
利用しているko.observableの値が変わると
実行される
ko.computed内で利用しているko.observable
ko.computed
足し算
18

19. data-bind
“value” binding は <input>, <select>, <textarea>のようなフォーム要素に使用
する。
“text” binding は <span>, <em> のような表示するための要素に使用する。
※基本的に何でもイケル。 number, string 以外の値をいれたら toString した値が表示される
“visible”, “style”, “attr”, “html”, “css”, “custom” などのbinding がある
足し算
19

20. ko.applyBindings(vm,node)
足し算
20

21. TODOアプリを作る21
Todo

22. ソースプログラム
 Knockout.js でTodoアプリ (Visual Studio2013
 http://tech.exceedone.co.jp/javascript/visualstudio-2013-
mvc5-with-twitterbootstrap-todos/
Todo
22

23. HTML
(/Views/Home/index.cshtml)23
Todo

24. JavaScript
(/Scripts/test.js)
24
Todo

25. 実行結果
Todo
25

26. Addボタンのアクション追加26
Todo
Index.cshtml
test.js

27. 実行結果27
Todo

28. TaskListに追加する28
Todo
test.js

29. TaskListに追加する29
Index.cshtml
foreachバインディング
Todo

30. 実行結果30
Todo

31. deleteボタンの
アクション追加
31
Todo
test.js

32. deleteボタンの
アクション追加
32
Index.cshtml
$parent: 親ViewModelオブジェクト
その他にも
$root: 最上位のコンテキストのViewModelオブジェクト
$data: 現在のコンテキストのViewModelオブジェクト
$index: foreachバインディング内で使用できる配列のインデックス
Todo

33. 時間が余ったら33

34. 時間が余ったら
 くつろぐ、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/
34

35. 補足
デバックについて35

36. Internet Explorer
Google Chromeはブレイクポイントはとまりません。
36

37. .cshtmlでのデバック
cshtmlでは、ブレイクポイントはとまりませんので
debuggerと入力します。
37

38. .jsでのデバック
.js ブレイクポイントはとまります。
38

39. ありがとうございました！！39