SharePoint2013 & Knockout.js で遊んでみた(その2)

前回の続きです。

いまさらですが、Knockout.jsってなんなのってあたりをおさらい。

Knockout.jsとは、MVVM(Model-View-View Model)設計パターンに基づいたアプリケーションの構築をサポートするJava Scriptフレームワークです。
特徴をKnockout.js日本語サイトからまんま引用しますと、

宣言型バインディング
UIに必要なのは ViewModel (シンプルなモデルオブジェクト) とデータバインドだけ。
ややこしいDOM操作なしで、動的なインターフェイスを作ることができます。
UIの自動更新
ViewModel のプロパティが変更されると、自動的にUIの関連付けられた部分を更新します。
依存関係のトラッキング
データの結合や変換を実現するためのデータ間の関係チェーンを暗黙的に設定します。
UIテンプレート
幾重にもネストされたテンプレートも、バインドされた ViewModel を用いて素早くUIを生成します。

MVVMって・・・とか深いところはとても説明できる自信がないので、興味があればこの辺とかみておいてください。
http://www.buildinsider.net/web/bookjslib111/89

SharePoint2013になってクライアントサイドでの自由度はかなり上がりましたが、とはいえ既存のwebパーツを使わず、自前の画面でSharePointとどうたらこうたらしようとなると、jQueryだけではかなり苦しくなってきます。画面構築とロジックが絡まりあって、コードの見通しも悪くなりますしね・・・
そういった面で、Knockout.jsを使うとスクリプト内でのDOM操作が必要なくなる、というのはかなり魅力です。スクリプト内では、画面のことは考えずデータ操作とイベント処理だけに専念すればよいわけです。
また、ユーザーさんとやり取りしながら作ってるとよくありがちな、度重なる画面仕様の変更にも強い(はず)です(スクリプト内でDOMを生成してたりすると、あとで必ずといってよいほど泣きを見るので・・・)

さて、前置きはこの辺で。
Knockout.jsをつかってなんかするぞー!という場合、最低限以下の作業が必要になります。

  • Knockout.js本体の読み込み(当たり前ですね?!)
  • Viewの定義(基本、画面のHTMLです)
  • ViewModelの定義(Viewに表示するデータの操作やViewから呼び出されるイベントハンドラを書きます)
  • ViewとViewModelの関連付け

Knockout.jsの読み込みは割愛させていただいて(すいません・・・)、まずViewを定義します。

<div class="MyLinkDiv">
    <table>
        <thead>
            <tr>
                <th>ID&</th>
                <th>Name</th>
                <th>URL</th>
                <th>Order</th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind='foreach: Links'>
            <tr>
                <td data-bind='text:ID'></td>
                <td><input data-bind='value: SiteName' /></td>
                <td><input data-bind='value: SiteURL' /></td>
                <td><input data-bind='value: SortOrder' /></td>
                <!-- 削除ボタン -->
                <td><input type='button' value='Delete' data-bind='click: $root.removeSite'/><td>
            </tr>
        </tbody>
    </table>
    <!-- 新規アイテム追加ボタン -->
    <input type='button' value='Add New' data-bind='click: addSite' />
    <!-- 保存ボタン -->
    <input type='submit' value='Save Links' data-bind='click: saveSites' />
</div>

ここでは”data-bind”という属性がキモになります。
inputタグにdata-bind=’value: SiteName’という記述がありますが、これで「このinputのvalueと、View Modelで定義したSiteNameプロパティをひもづけるよ!」と定義してることになります。
ここの”value”を「バインディング」といい、Knockoutではいろいろと用意されています。また、SiteNameの方はここではプロパティですが、そのほか式などもひもづけできます。

また、”foreach”バインディングを使うことで、テーブルやリストといった繰り返し処理の必要なマークアップとView Model内の配列をひもづけることができます。上記のように書くことで、配列内の要素ぶんだけViewのテーブルに行が出力されることになります。

あ、あとですね、”$root”というのは「ルートコンテキストにあたるメインの ViewModel であり、最上位のコンテキスト」ってことなんですが、まあここではView Modelの”removeSite”っていう関数を呼び出してるんだと便宜的に思っといてください。
(バインディングコンテキストについては、詳しくはこちらをみてください)

なお、データバインディングについてもっと知りたい場合は、先ほど紹介した日本語サイトや、本家のドキュメントを参照してください。

おっと、意外と長くなってしまった・・・なかなか佳境に入りませんが、今回はこの辺で。

て、今回はまったくSharePoint出てきませんでしたね?!(汗)。次回はきっと登場します・・・

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中