配列要素の削除
配列要素を削除するには、removeメソッドを使用します。removeメソッドは、$.observable(データソースの配列).remove()のように呼び出します。引数なしにremoveメソッドを呼び出すと、最後尾の配列要素が削除されます。
第1引数に削除する要素のインデックスを指定できます。
また、第2引数に削除する要素の数を指定できます。
［リスト4］配列要素の削除（JsViews2_sample4.html）
// removeメソッドを使用して配列の先頭の要素を削除
$("#removeFirst").on("click", function(){
$.observable(items).remove();
});
// removeメソッドを使用して配列の中間の要素を2つ削除
$("#removeMiddle").on("click", function(){
$.observable(items).remove(items.length/3, 2);
});
図5：配列要素の削除
配列要素の移動
配列要素を移動するには、moveメソッドを使用します。moveメソッドは、$.observable(データソースの配列).move(移動する要素のインデックス, 移動先のインデックス)のように呼び出します。
複数の要素を同時に移動するには、moveメソッドの第3引数に移動する要素の数を指定します。
［リスト5］配列要素の削除（JsViews2_sample5.html）
// moveメソッドを使用して配列の先頭の要素を最後尾に移動
$("#moveFirst").on("click", function(){
$.observable(items).move(0, items.length-1);
});
// moveメソッドを使用して配列の中間の3つの要素を先頭に移動
$("#moveMiddle").on("click", function(){
$.observable(items).move(items.length/3, 0, 3);
});
図6：配列要素の移動
配列全体の更新
配列全体を更新するには、refreshメソッドを使用します。配列操作を何度も行い、そのたびにHTMLを更新する代わりに、refreshメソッドを使用して一度全体を更新することでパフォーマンスが向上します。
refreshメソッドは、$.observable(データソースの配列).refresh(新しい配列)のように呼び出します。
［リスト6］配列全体の更新（JsViews2_sample6.html）
// valueの値を比較
function compareValue(a, b){
if(a.value < b.value) return -1;
else if(a.value > b.value) return 1;
else return 0;
}
$("#refresh").on("click", function(){
// データソースをvalueの値順に並び替え
items.sort(compareValue);
// refreshメソッドを使用して配列全体を更新
$.observable(items).refresh(items);
});
図7：配列全体の更新
まとめ
今回はJsObservableを使用して、JavaScriptからデータソースの値を変更する方法を紹介しました。
JsObservableは、プロパティを変更し通知を受け取るといった非常に単純なものですが、MVVMパターンを実装する上で重要な機能を担います。また、JsObservableを適切に使用し、不必要なHTMLの更新をなくすことで、JsViewsが本来持つパフォーマンスが発揮されます。
