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

CodeZine / 2014年4月10日 14時0分

図7:配列全体の更新

 前回は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つをダウンロードしてください。

JsViewsjQuery■プロパティの変更

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




CodeZine

トピックスRSS

ランキング