Upload
noro-seiji
View
592
Download
1
Embed Size (px)
DESCRIPTION
20140712 knockoutjs-hands-on-in-osaka Knockout + JavaScript + TypeScript
Citation preview
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