JsRenderタグとデータリンクタグ
テンプレートの中にJsRenderのタグを記述できます。JsRenderのタグは静的データバインドが行われるため、データソースの値を変更しても、HTMLの値は変わりません。
動的データバインドを行うためには、data-link属性を含むHTML要素を記述するか、もしくは、データリンクタグを記述します。データリンクタグはJsRenderのタグと似ていますが、{{}}の代わりに{^{}}を使用します。
<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>
データリンクタグではコンバーターやヘルパー、カスタムタグなど、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属性の例 |
|---|---|---|
| パス | {{: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属性に複数のターゲットをスペース区切りで指定します。
<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>
まとめ
今回は、JsViewsの概要と基本的な使い方を紹介しました。JsViewsはJsRenderのテンプレートに宣言型データバインドを追加するフレームワークで、MVVMパターンを実装するために利用できます。JsViewsは双方向の動的なデータバインドを行います。双方向の動的なデータバインドの例として、フォームからUIを更新するとデータソースの値が更新され、データソースの値が更新されたために、UIが更新される例をみてきました。
次回はデータソースの値をJavaScriptから変更し、また、データソースの値が変化した際に通知を受け取る方法を紹介します。
