6/24に「第1回 knockoutjsナイトセミナー@東京 」の勉強会に行ってきました。都合で最初のセッションしか聞けませんでしたが、勉強会の内容を紹介します。
KnockoutJSとVisual Studio/Office365のむふふな関係！？ Wijmoも参戦します！ : ATND
スライドはなく、全編デモで、非常に実践的な内容で勉強になりました。
メモ
Visual Studioのツールサポート
Visual Studio 2012
- ASP.NET Web Toolsを入れると、Kockoutjs用のプロジェクトテンプレートが使えるようになる
- 新規プロジェクトを作成すると、ToDoリストが作成される
- アプリケーションの完成度は2013よりも高い
- ツールサポートは弱い
- マークアップの箇所はインテリセンスが出ない
- "<span data-"まで入力しても入力候補が出てこない
- マークアップの箇所はインテリセンスが出ない
Visual Studio 2013
- 新規プロジェクトは、2012に比べるとシンプルなテンプレート
- インテリセンスは2012よりも進化
- "<span data-"まで入力すると入力候補が出てくる
- ClickにBindするメソッド名も入力補完される（ViewModelにメソッドが定義されていれば）
NuGetで提供されているKnockoutjsのPlugin
Knockout Generator
- Modelsにクラスを追加
- 右クリックして、[Generate Knockout ViewModel]
- 表示されたウィンドウで、JavaScirptのViewModelのソースコードを生成できる
- [All Observable]をチェックすると、配列やIEnumerableをobservableArrayとして生成してくれる
knockout.Mapping
- １行でobservableなViewModelを作成できる
var viewModel = ko.mapping.fromJS(obj); // objは元となるJavaScriptオブジェクト
knockout.Bootstrap
- Bootstrapのウォーターマークなどをバインディングできる
Knockoutjsのデバッグ
Glimpse
- [KnockoutJS inspector for Glimpse]をNugetからインストールする
- http://[debug url]/Glimpse.axdにアクセスして、GlimpseをONにすると、ViewModelの状態をモニタリングできる
- クッキー使ってるので、ブラウザ落としてもONのまま。無効にするには、http://[debug url]/Glimpse.axdに再度アクセスし、OFFにすること。
knockout-view
jmeas/knockout-view
A bookmarklet that toggles a display of any page's Knockout View Model.
- ViewModelの状態を表示するブックマークレット
松崎さんのフォローアップ記事
Knockout.js の Utility や Plugin (programming, debugging, monitoring) #html5biz - 松崎 剛 Blog - Site Home - MSDN Blogs
昨日の KnockoutJS 勉強会では、プログラミングやデバッグを支援する Tools Support や Plugin について簡単に紹介させていただきました。 使用したツール、コード、参照 URL (ドキュメント) 等を掲載しておきます。 ...
