JavaScript MVVMフレームワーク「JsViews」のJsObservableを使ったデータソースの変更と監視

徹底解説JsRender／JsViews 第6回

　前回はJsViewsの概要と基本的な使い方を紹介しました。今回は、JavaScriptからデータソースの値を変更する方法を紹介します。

はじめに

　JsViewsではデータソースの値を変更する、およびデータソースの変更を監視する機能を、JsObservableというライブラリとして提供しています。JsObservableを使用すると、以下のことができます。

• データソースの値をJavaScriptから変更し、再度データバインドを行う
• データソースの値が変更された際に、通知を受け取り任意の処理を行う

　今回はJsViewsの一部であり、MVVMパターンを実装するために不可欠なJsObservableの使い方を紹介します。

　JsViewsを用いてMVVMパターンを実装する場合、ViewはHTMLで書かれたUIであり、ViewModelはJavaScriptのオブジェクトとして定義されたデータソースです。

　JsObservableは、ViewModelとModelを繋ぐ働きをします。ModelはJsObservableを用いてViewModelを変更し、また、ViewModelが変更された際にJsObservableから通知を受け取ります。

図1：JsObservableの役割

対象読者

• JavaScriptデータバインドフレームワークに興味のある方
• WebアプリケーションにおけるMVVMパターンに興味のある方
• JavaScript、jQueryの基本を理解している方

必要な環境と準備

　JsViewsとjQueryをダウンロードしてください。JsViewsのダウンロードページでjsviews.jsをダウンロードしてください。jsviews.jsにはJsRenderと同様に、JsObservableも含まれています。

　JsViews（jquery.views.js）とJsObservable（jquery.observable.js）を個別にダウンロードすることもできます。個別にダウンロードする際は、JsRender、JsObservable、そしてJsViewsの3つをダウンロードしてください。

• JsViews
• jQuery

プロパティの変更

　JsViewsはデータバインドフレームワークで、データソースとなるJavaScriptのオブジェクトを変更すると、UIであるHTMLが自動的に更新されます。

　JavaScriptからデータソースを変更するには、データソースとなるJavaScriptオブジェクトのプロパティの変更をJsViewsに伝える必要があります。プロパティを変更するには、JsObservableのsetPropertyメソッドを使用します。

　JavaScriptの代入演算子を使用してプロパティを変更しても、JsViewsはデータバインドを行わず、HTMLも更新されないので注意してください。

［リスト1］データリンクタグを含むテンプレート（JsViews2_sample1.html）

<!-- テンプレートの定義 -->
<script id="itemTemplate" type="text/x-jsrender">
  <b>{^{>name}}</b>の値段は<b>{^{>price}}円</b>です。<br/>
  重さは<b>{^{>weight}}グラム</b>です。<br/>
  <img data-link="src{>image.url} alt{>image.alt}" />
</script>

<!-- データバインドを行うHTML要素 -->
<div id="linkedContent"></div><br/>

<!-- ボタン -->
<button id="equalOperatorTest">代入演算子を使用してプロパティの値を変更</button><br/>
<button id="setPropertyTest1">setPropertyメソッドを使用してプロパティの値を変更</button><br/>
<button id="setPropertyTest2">setPropertyメソッドにプロパティのパスを指定して値を変更</button><br/>

<script type="text/javascript">
  // データソースの定義
  var item = {
    name: "みかん",
    price: 100,
    weight: 60,
    image: { url: "images/mikan.png", alt: "みかん画像" }
  };

  // テンプレートオブジェクトを作成し、HTML要素#placeholderとデータソースitemを関連付ける
  $.templates("#itemTemplate").link("#linkedContent", item);

  // 1. 代入演算子を使用してプロパティの値を変更
  // データソースを変更しても、UIは更新されない
  $("#equalOperatorTest").on("click", function(){
    item.name = "ばなな";
  });

  // 2. setPropertyメソッドを使用してプロパティの値を変更
  // データソースの変更に伴い、UIが更新される
  $("#setPropertyTest").on("click", function(){
    $.observable(item).setProperty("name", "りんご");
  });

  // 3. setPropertyメソッドを使用してプロパティの値を変更
  // プロパティのパスを指定する
  $("#setPropertyTest").on("click", function(){
    $.observable(item).setProperty("image.url", "images/apple.png");
  });
</script>

1. ボタンがクリックされた際に、代入演算子を使用してデーターソースとなるJavaScriptのオブジェクトitemのプロパティを変更します。代入演算子を使用してプロパティを変更しても、データバインドは行われずHTMLは更新されません。
2. ボタンがクリックされた際に、setPropertyメソッドを使用してプロパティを変更します。setPropertyメソッドは、$.observable(データソースのオブジェクト).setProperty(変更するプロパティのパス, 値)のように呼び出します。
3. setPropertyの第1引数にパスを指定できます。

図2：JavaScriptからプロパティを変更