[knockoutjs]observableArrayの活用

gistfile1.md

配列を使うには？

配列もknockoutで扱えるのか。
もちろんです。

とても簡単に扱うことができます。

<table>
  <thead>
    <tr><th>First name</th><th>Last name</th></tr>
  </thead>
  <tbody data-bind="foreach: people">
    <tr>
      <td data-bind="text: firstName"></td>
      <td data-bind="text: lastName"></td>
    </tr>
  </tbody>
</table>
 
<script type="text/javascript">
var viewModel = {
  people: [
    { firstName: 'Bert', lastName: 'Bertington' },
    { firstName: 'Charles', lastName: 'Charlesforth' },
    { firstName: 'Denise', lastName: 'Dentiste' }
  ]
}
ko.applyBindings(viewModel);
</script>

これを実行すると、Tableに3列分のデータが追加されます。

データの追加

上記のデータに追加してみましょう。
Chromeのコンソール以下の値を入力します。

viewModel.people.push({ firstName: 'Yukio', lastName: 'Hatoyama' });

即座にテーブルに列が追加されたはずです。

データの削除

配列データを削除するには削除対象のオブジェクトが必要になります。

var remove_obj = viewModel.people()[viewModel.people().length-1];
viewModel.people.remove(remove_obj);

これで鳩山由紀夫は削除されます。
ついでに、すべてのデータを削除する場合はいくつか方法があります。

viewModel.people([]);
viewModel.people.removeAll();

上記どちらでもリストがリセットされます。

データ削除に関する注意点

なぜかIE8でremoveAllによる配列削除中にエラーが発生する（配列のデータは消えるが途中で処理がコケる）。
なので配列のリセットを行う際に例外処理でカバーする必要があるかもしれない。