View
899
Download
1
Category
Preview:
Citation preview
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
Recommended