JavaScript MVVMフレームワーク「JsViews」の概要

徹底解説JsRender／JsViews 第5回

JsRenderタグとデータリンクタグ

　テンプレートの中にJsRenderのタグを記述できます。JsRenderのタグは静的データバインドが行われるため、データソースの値を変更しても、HTMLの値は変わりません。

　動的データバインドを行うためには、data-link属性を含むHTML要素を記述するか、もしくは、データリンクタグを記述します。データリンクタグはJsRenderのタグと似ていますが、{{}}の代わりに{^{}}を使用します。

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

<script id="itemTemplate" type="text/x-jsrender">
  <input data-link="value"/><br/>
  data-link属性： <span data-link="value"></span><br/>
  JsRenderタグ: {{:value}}<br/>
  データリンクタグ: {^{:value}}<br/>
</script>

図4：データリンクタグを含むテンプレート

　データリンクタグではコンバーターやヘルパー、カスタムタグなど、JsRenderの機能が利用できます。詳しくは、前回までの記事を参照してください。

JsRenderのタグとデータリンクタグの比較

機能	JsRenderのタグの例	データリンクタグの例
パス	{{:name}}	{^{:name}}
式	{{:value/100}}	{^{:value/100}}
HTMLコンバーター	{{>name}}	{^{>name}}
ヘルパー関数	{{:~helperFunc(value)}}	{^{:~helperFunc(value)}}
カスタムタグ	{{customTag value}}	{^{customTag value}}

データリンクエレメント

　data-link属性を含むHTML要素を、データリンクエレメントと呼びます。

　data-link属性にはJsRenderのタグと同様に、データソースオブジェクトのパスや式を指定します。data-link="パスや式"はdata-link="{:パスや式}"の省略記法で、これら2つは同義です。

　data-link属性ではコンバーターやヘルパー、カスタムタグなど、JsRenderの機能が利用できます。

JsRenderのタグとdata-link属性の比較

機能	JsRenderのタグの例	data-link属性の例
パス	{{:name}}	data-link="name"、data-link="{:name}"
式	{{:value/100}}	data-link="1+1"、data-link="{:value/100}"
HTMLコンバーター	{{>name}}	data-link="{>name}"
ヘルパー関数	{{:~helperFunc(value)}}	data-link="{:~helperFunc(value)}"
カスタムタグ	{{customTag value}}	data-link="{customTag value}"

data-link属性のターゲット

　<span data-link="{:value}"></span>は、span要素のinnerTextとデータソースをデータバインドします。innerText以外にも、htmlの属性やCSSプロパティなどに対してデータバインドを行えます。

　HTML属性に対してデータバインドを行うには、data-link属性に"HTML属性名{:パスや式}"を指定します。このHTML属性名の箇所をターゲットと呼び、HTML属性名以外にも、CSSプロパティやinnerHTML、innerTextを指定できます。

　CSSプロパティに対してデータバインドを行うには、CSSのプロパティ名の前に"css-"を付けたものをターゲットとして指定します。

　innerHTMLやinnerTextに対してデータバインドを行うには、htmlかtextをターゲットとして指定します。

　ターゲットが指定されていない場合は、デフォルトターゲットが使用されます。input要素とselect要素のデフォルトターゲットはvalueですが、それ以外の要素のデフォルトターゲットはinnerTextです。

ターゲットの種類

ターゲットの種類	ターゲットの例
HTML属性	title{...}、class{...}、id{...}、value{...}など
CSSプロパティ	css-background-color{...}など
innerHTML	html{...}
innerText	text{...}
特別なターゲット	visible、checkedなど

　複数のターゲットを同時に指定できます。"ターゲット名1{:パスや式1} ターゲット名2{:パスや式2}"のように、data-link属性に複数のターゲットをスペース区切りで指定します。

［リスト4］複数のターゲットを同時に指定する（JsViews1_sample4.html）

<script id="itemTemplate" type="text/x-jsrender">
  幅: <input data-link="width"/><br/>
  高さ: <input data-link="height"/><br/>
  背景色: <input data-link="bgcolor"/><br/>
  テキスト: <input data-link="text"/><br/>

  <div data-link="css-width{:width} css-height{:height} css-background-color{:bgcolor} text{:text}"></div>
</script>

図5：複数のターゲットを同時に指定する

まとめ

　今回は、JsViewsの概要と基本的な使い方を紹介しました。JsViewsはJsRenderのテンプレートに宣言型データバインドを追加するフレームワークで、MVVMパターンを実装するために利用できます。JsViewsは双方向の動的なデータバインドを行います。双方向の動的なデータバインドの例として、フォームからUIを更新するとデータソースの値が更新され、データソースの値が更新されたために、UIが更新される例をみてきました。

　次回はデータソースの値をJavaScriptから変更し、また、データソースの値が変化した際に通知を受け取る方法を紹介します。

参考資料

• jsviws.com
• Introduction to Model/View/ViewModel pattern for building WPF apps