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.toJSON
でJSONに変換できる。ko.toJSON(<ビューモデル>)と
フォームのテキストエリアなどをバインディングすれば、ビューでの変更を検知して常に最新のデータを送信できる。
Step 4
フォームを使わず、'$.ajax'で直接データを送信することももちろんできる。
Step 5
observableな配列のdestroy
関数を使用することで、データの削除をサーバーサイドで検知しやすくなる。この関数はデータに_destroy
プロパティを増やしてtrue
をセットする。サーバーサイド技術としてRuby on Railsを採用しているなら、そのままでうまく動く(ActiveRecordが_destroy
プロパティを見て上手いことやってくれる)。サーバ側がそれ以外の技術を採用している場合、_destroy
プロパティを見てデータを消すような処理を追加してあげればよい。