Do You PHP はてブロ

Do You PHPはてなからはてブロに移動しました

JsViewsチュートリアル - データリンクの方向性

jsviews

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。

今回やること

JsViewsのデータリンクが一方向・双方向の2種類あることを確認する

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<div id="result"></div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script>
<script type="text/javascript">
// データリンクの方向性
$(function() {
    // 表示するデータ
    var message = {
        greet: 'Hello !'
    };

    // テンプレートに名前(ここでは"linkTemplate")をつけて登録する
    $.templates({
        linkTemplate: "#template"
    });

    // テンプレート"linkTemplate"と変数messageをリンク
    $.link.linkTemplate('#result', message);
});
</script>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <div>
        <p><span data-link="greet"></span></p>

        {{!-- 変数名(triggerを含む)の前にのみ":"を付けた場合は一方向リンク --}}
        <p>一方向：data-link="{:greet trigger=true}"</p>
        <div><input data-link="{:greet trigger=true}"/></div>

        {{!-- 変数名(triggerを含む)の前後に":"を付けた場合は双方向リンク --}}
        <p>双方向：data-link="{:greet trigger=true:}"</p>
        <div><input data-link="{:greet trigger=true:}"/></div>

        {{!-- 変数名(triggerを含む)だけの場合は1番目の記述方法の省略形(双方向リンク) --}}
        <p>双方向：data-link="greet trigger=true"</p>
        <div><input data-link="greet trigger=true"/></div>
    </div>
</script>
</body>
</html>

説明

JsViewsチュートリアル - フォーム要素とデータリンク(チェックボックス＋コンバータ) - Do You PHP はてなでも軽く触れましたが、JsViewsのdata-link属性に変数を記述する際、記述方法によって変更した値をリンクした変数に反映するかどうかが決まります。
JsViewsでのデータの流れは、先のエントリでも若干説明しましたが、大まかに以下のようになります。

変数 → [値] → [コンバータによる変換] → data-link属性を付けたHTML要素 → [変更された値] → [コンバータによる変換] → 変数

一方、data-link属性の値は、正しくは先のエントリにある

data-link="{[変数を取得する際のコンバータ]:[変数名]:[変数を書込む際のコンバータ]}"

という記述方法になります。各コンバータは省略可能です。先ほどのデータの流れに対応してるのが分かりますかね？
また、変数とコンバータの区切りに":"(コロン)を付けていますが、これが"どの方向に対してデータをリンクするか"を表しています。たとえば、上のように変数名の前後に":"を付けると、データの流れが

  • 変数→HTML要素
  • 変数←HTML要素

という双方向になります。これは双方向(two-way)データリンクと呼ばれます。
一方、後ろの":"以降を省略すると

data-link="{[コンバータA]:[変数名]}"

となりますが、データの流れは

変数 → [値] → [コンバータAによる変換] → data-link属性を付けたHTML要素

という具合に

  • 変数→HTML要素

という流れのみになるので、一方向(one-way)データリンクと呼ばれます。結果として、変更した値は変数に反映されません。
また、

data-link="{:[変数名]:}"

とすれば

変数 → [値] → data-link属性を付けたHTML要素 → [変更された値] → 変数

になりますが、これは今までの説明で出てきた

data-link="[変数名]"

と等価になります。
なお、変数名の前の":"のみ省略する、ということはできません。

ちなみに、フォーム要素以外のHTML要素の場合、リンクされた値を直接変更する手段がありませんので、一方向・双方向のいずれの記述方法でも結果的に一方向となります。

JSFiddleで動作を見る

参照