CodeZine(コードジン)

特集ページ一覧

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

徹底解説JsRender/JsViews 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/02/26 14:00
目次

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:データリンクタグを含むテンプレート
図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:複数のターゲットを同時に指定する
図5:複数のターゲットを同時に指定する

まとめ

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

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

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:徹底解説JsRender/JsViews

著者プロフィール

  • WINGSプロジェクト やましぎ (ヤマシギ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5