複数のプロパティを同時に変更
複数のプロパティを同時に変更できます。変更するプロパティのパスをキーとする連想配列を引数にsetPropertyメソッドを呼び出します。
複数のプロパティを変更する際に、プロパティごとにsetPropertyメソッドを呼び出すと、そのたびにHTMLが更新されます。連想配列を使用して複数のプロパティを一度に変更すると、HTMLを更新する回数が減り、パフォーマンスが向上します。
［リスト2］複数のプロパティを同時に変更（JsViews2_sample2.html）
// データソースの定義
var item = {
name: "みかん",
price: 100,
weight: 60,
image: { url: "images/mikan.png", alt: "みかん画像" }
};
// setPropertyTestボタンが押された際に、setPropertyメソッドを使用してプロパティの値を変更する
$("#setPropertyTest").on("click", function(){
$.observable(item).setProperty({
name: "りんご",
price: 200,
weight: 60,
"image.url": "images/apple.png",
"image.alt": "りんご画像",
});
});
図3：複数のプロパティを同時に変更
配列の操作
データソースが配列の場合も同様に、JsObservableのメソッドを使用して配列要素を変更します。
配列要素の挿入
配列要素を挿入するには、insertメソッドを使用します。insertメソッドは、$.observable(データソースの配列).insert(挿入する配列要素)のように呼び出します。
配列要素は最後尾に挿入されます。配列要素を挿入する位置を指定する場合には、insertメソッドの第1引数にインデックス（配列中の位置）を指定します。
［リスト3］配列要素の挿入（JsViews2_sample3.html）
<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
<li>{^{>value}}</li>
</script>
<!-- データバインドを行うHTML要素 -->
<ul id="linkedContent"></ul><br/>
<!-- テキストボックスとボタン -->
<input id="text" type="text"/>
<button id="insert">先頭に挿入</button>
<button id="append">最後尾に追加</button><br/>
<script type="text/javascript">
// データソースの定義
var items = [];
// テンプレートオブジェクトを作成し、HTML要素#placeholderとデータソースitemを関連付ける
$.templates("#itemTemplate").link("#linkedContent", items);
// insertメソッドを使用して配列の先頭に要素を挿入
$("#insert").on("click", function(){
$.observable(items).insert(0, {value: $("#text").val()});
$("#text").val("");
});
// insertメソッドを使用して配列の最後尾に要素を追加
$("#append").on("click", function(){
$.observable(items).insert({value: $("#text").val()});
$("#text").val("");
});
</script>
この例では、テキストを入力しボタンを押すと、入力したテキストがリストに追加されます。
図4：配列要素の挿入
