KnockoutJSHands-On Visual Studio

Knockoutjs 勉強会の内容初心者向け JavaScript 入門からテラ・コーティングまで！ JavaScriptフレームワークの主流、 MVVM アーキテクチャパターンを採用している knockoutjs を堪能する！

1

http://atnd.org/events/50026

自己紹介 名前 : 野呂清二 Twitter : @seinoro Facebook : seiji.noro 言語 :C#, JavaScript (C++, Java)

Microsoft MVP for Office365 <

http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro-5000492>

2

参考文献

Knockout handson http://

www.slideshare.net/tanago3/knockout-handson

Knockout 日本語ドキュメント http://kojs.sukobuto.com/

3

ハンズオンの流れ

環境のセットアップ

足し算アプリを作る

TODO アプリを作る

4

環境のセットアップ5

Setup

6

Setup

Visual Studio のインストール

Visual Studio 2013 90 日間の無償評価版 http://www.visualstudio.com/ja-jp/downloads/download-v

isual-studio-vs.aspx Microsoft Visual Studio Professional 2013 Update 2

Microsoft Visual Studio Express 2013 for Web でも可能と思われる。

7

Setup

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

②

③

④

8

Setup

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

②

9

Setup

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

①

10

Setup

足し算アプリを作る11

足し算

ソースプログラム

Knockout.js で足し算アプリ (Visual Studio2013) http://tech.exceedone.co.jp/javascript/visualstudio-2013-m

vc5-with-twitterbootstrap-caluculate/

12

足し算

13 HTML (/Views/Home/index.cshtml)

足し算

14 JavaScript(/Scripts/test.js)

足し算

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

足し算

15

実行結果足し算

16

ko.observable()値の変更を監視します・主に UI と同期するために使用

※ko.observableArray() は後述

ko.observable

足し算

17

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

ko.computed 内で利用している ko.observable

ko.computed

足し算

18

data-bind

“value” binding は <input>, <select>, <textarea> のようなフォーム要素に使用する。

“text” binding は <span>, <em> のような表示するための要素に使用する。※ 基本的に何でもイケル。 number, string 以外の値をいれたら toString した値が表示される

“visible”, “style”, “attr”, “html”, “css”, “custom” などの binding がある

足し算

19

ko.applyBindings(vm,node)

足し算

20

TODO アプリを作る21

Todo

ソースプログラム

Knockout.js で Todo アプリ (Visual Studio2013 http://tech.exceedone.co.jp/javascript/visualstudio-2013-m

vc5-with-twitterbootstrap-todos/

Todo

22

23

HTML (/Views/Home/index.cshtml)

Todo

24 JavaScript(/Scripts/test.js)

Todo

実行結果Todo

25

26 Add ボタンのアクション追加Todo

Index.cshtml

test.js

実行結果27

Todo

28 TaskList に追加するTodo

test.js

TaskList に追加する29

Index.cshtml

foreach バインディング

Todo

実行結果30

Todo

31 delete ボタンのアクション追加

Todo

test.js

delete ボタンのアクション追加

32

Index.cshtml

$parent: 親 ViewModel オブジェクト

その他にも$root: 最上位のコンテキストの ViewModel オブジェクト$data: 現在のコンテキストの ViewModel オブジェクト$index: foreach バインディング内で使用できる配列のインデックス

Todo

時間が余ったら33

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

Internet ExplorerGoogle Chrome はブレイクポイントはとまりません。

36

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

37

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

38

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