Knockout.js チュートリアルのメモ:Loading and saving data

Step 1

Knockout.jsは純粋なクライアントサイドライブラリなのでサーバサイド技術との協調については柔軟さがある。 サーバサイドとJSONデータをやり取りする方法をこのチュートリアルで学ぶ。 例として、タスクリストを扱う。

Step 2

JSONデータを取得する簡単な方法としてはjQuery$.getJSON$.ajaxがある。

データをロードした後、ko.applyBindingsする必要はない。新しくビューモデルをリバインドするのではなく、単純にビューモデルの状態を変えるだけでよい。

例ではロードしたデータを手作業で各プロパティにセットしているが、knockout mapping プラグインを使えばもう少し自動化できる。

Step 3

observableを含んだビューモデルをko.toJSONJSONに変換できる。ko.toJSON(<ビューモデル>)とフォームのテキストエリアなどをバインディングすれば、ビューでの変更を検知して常に最新のデータを送信できる。

Step 4

フォームを使わず、'$.ajax'で直接データを送信することももちろんできる。

Step 5

observableな配列のdestroy関数を使用することで、データの削除をサーバーサイドで検知しやすくなる。この関数はデータに_destroyプロパティを増やしてtrueをセットする。サーバーサイド技術としてRuby on Railsを採用しているなら、そのままでうまく動く(ActiveRecord_destroyプロパティを見て上手いことやってくれる)。サーバ側がそれ以外の技術を採用している場合、_destroyプロパティを見てデータを消すような処理を追加してあげればよい。