20140712 knockoutjs-hands-on-in-osaka

KnockoutJSHands-On Visual Studio

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

1

http://atnd.org/events/51279 大阪

この資料の場所2

http://www.slideshare.net/seijinoro/20140712-knockoutjshandsoninosaka

http://urx.nu/a39R

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

Microsoft MVP for Office365 <

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

3

参考文献

Knockout handson http://

www.slideshare.net/tanago3/knockout-handson

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

4

ハンズオンの流れ

環境のセットアップ

足し算アプリを作る

TODO アプリを作る

TypeScript+knockoutJS

5

環境のセットアップ6

Setup

7

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

8

Setup

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

②

9

Setup

新規プロジェクト作成

③

④

クラウド内のホストチェック外す

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

②

10

Setup

オンライン KnockoutJS

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

①

11

Setup

Scripts フォルダー

足し算アプリを作る12

足し算

ソースプログラム

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

vc5-with-twitterbootstrap-caluculate/

13

足し算

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

足し算

15 JavaScript(/Scripts/test.js)

足し算

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

足し算

16

実行結果足し算

17

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

※ko.observableArray() は後述

ko.observable

足し算

18

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

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

ko.computed

足し算

19

data-bind

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

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

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

足し算

20

ko.applyBindings(vm,node)

足し算

21

TODO アプリを作る22

Todo

ソースプログラム

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

vc5-with-twitterbootstrap-todos/

Todo

23

24

HTML (/Views/Home/index.cshtml)

Todo

25 JavaScript(/Scripts/test.js)

Todo

実行結果Todo

26

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

Index.cshtml

test.js

実行結果28

Todo

29 TaskList に追加するTodo

test.js

TaskList に追加する30

Index.cshtml

foreach バインディング

Todo

実行結果31

Todo

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

Todo

test.js

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

33

Index.cshtml

$parent: 親 ViewModel オブジェクト

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

Todo

TypeScript+KnockoutJS34

TypeScript

ソースプログラム

TypeScript+KnockoutJS アプリ (Visual Studio2013) http://tech.exceedone.co.jp/javascript/typescript-knockoutj

s-visual-studio2013/

35

TypeScript

Knockout.js 日本語ドキュメントを参考につくってみましょう。

36

http://kojs.sukobuto.com/tips/withTypeScript

TypeScript

Web Essentials を可能ならインストール

37

http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

TypeScript

Web Essentials インストール38

① ツール - 拡張機能と更新プログラム

②

TypeScript

TypeScript と JavaScript が同時に確認できます。

39

TypeScript JavaScript

TypeScript

① ファイル / 新規作成 / プロジェクト②Visual C#/TypeScript/TypeScipt を使用した HTML アプリケーショ

②

40 新規プロジェクト作成TypeScript

実行 (F5) するとサンプルが起動する。

41

もちろんデバックもできます。

typescript definitelytypescript definitely

TypeScript

KnockoutJS 等をインストール

NuGet パッケージ管理 Knockoutjs

GitHub knockout-es5

https://github.com/SteveSanderson/knockout-es5

右側の Download ZIP/ dist の中のファイルを追加

42

TypeScript

typescript definitely をインストール (t.ds)

knockout.es5.TypeScript.DefinitelyTyped 依存　 knockout.TypeScript.DefinitelyTyped

43

TypeScript

Index.html にソースを張る。44

JS はドラック＆ドロップできます。

TypeScript

app.ts を編集する45

d.ts はドラック＆ドロップできます。

TypeScript

デバック (F5) してみる46

TypeScript

時間が余ったら47

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

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

50

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

51

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

52

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