Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

「第1回 knockoutjsナイトセミナー@東京 」に行ってきた(「Visual Studio and KnockoutJS」by 日本マイクロソフト株式会社 松崎 剛さん)

f:id:JHashimoto:20140409044240j:plain

6/24に「第1回 knockoutjsナイトセミナー@東京 」の勉強会に行ってきました。都合で最初のセッションしか聞けませんでしたが、勉強会の内容を紹介します。

KnockoutJSとVisual Studio/Office365のむふふな関係!? Wijmoも参戦します! : ATND

最初のセッションは、日本マイクロソフト株式会社 松崎 剛さんさんの「Visual Studio and KnockoutJS」でした。


スライドはなく、全編デモで、非常に実践的な内容で勉強になりました。

メモ

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
  1. Modelsにクラスを追加
  2. 右クリックして、[Generate Knockout ViewModel]
  3. 表示されたウィンドウで、JavaScirptのViewModelのソースコードを生成できる
  • [All Observable]をチェックすると、配列やIEnumerableをobservableArrayとして生成してくれる
knockout.Mapping
  • 1行でobservableなViewModelを作成できる
var viewModel = ko.mapping.fromJS(obj); // objは元となるJavaScriptオブジェクト
knockout.Bootstrap
  • Bootstrapのウォーターマークなどをバインディングできる

Knockoutjsのデバッグ

Glimpse
  1. [KnockoutJS inspector for Glimpse]をNugetからインストールする
  2. 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 (ドキュメント) 等を掲載しておきます。 ...