Do You PHP はてブロ

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

JsViewsチュートリアル - フォーム要素とデータリンク(チェックボックス＋コンバータ)

jsviews

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

今回やること

JsViewsでチェックボックスをデータリンクさせ、コンバータで変数に格納する値を変更する

コード

<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() {
    $.views.converters({
        preCheckbox: function (value) {
            return value == '1' ? true : false;
        },
        postCheckbox: function (value) {
            return value == true ? '1' : '0';
        }
    });

    // 表示するデータ
    var message = {
        check_as_value: '0'
    };

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

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

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

    <div>
        <label for="check_as_value"><input id="check_as_value" type="checkbox" data-link="{preCheckbox:check_as_value:postCheckbox}"/>チェックボックス</label>
    </div>
</script>
</body>
</html>

説明

1つ前のエントリではチェックボックスとデータリンクさせた場合、値がbool型(true・false)になることを見てきましたが、"0"と"1"で表したほうが良い場合が多々あると思います。この場合、コンバータを使うことで解決できます。
これまでは、表示形式を変更するためにコンバータを使ってきましたが、リンクした値を変更する場合にも使えます。また、

  • リンクした変数から値を取得する
  • リンクした変数に値を格納する

という2つのタイミングでコンバータを使用できます。イメージ的には次のようなフローになります。

変数 → [値を取得] → input要素 → [値を格納] → 変数

2つコンバータを使用する場合のテンプレート側の書き方は以下のようになります。

{[コンバータ(前)]:[変数]:[コンバータ(後)]}

先ほどのフローを書き換えると次のようになります。

変数 → [コンバータ(前)] → input要素 → [コンバータ(後)] → 変数

たとえば、今回のチェックボックスの場合、input要素ではtrue・falseでチェックボックスのオン・オフを切り替えますが、最終的な値は1か0としたいので、

  • コンバータ(前)では、1・0をそれぞれtrue・falseに変換する
  • コンバータ(後)では、true・falseをそれぞれ1・0に変換する

とすれば良い、ということになります。

変数 → [1・0をtrue・falseに変換] → input要素 → [true・falseを1・0に変換] → 変数

コンバータの書式はJsRenderチュートリアル - 独自のコンバータを作る - Do You PHP はてなと同じです。以下のpreCheckbox、postCheckboxというコンバータが、それぞれコンバータ(前)、コンバータ(後)に相当します。

$.views.converters({
    preCheckbox: function (value) {
        return value == '1' ? true : false;
    },
    postCheckbox: function (value) {
        return value == true ? '1' : '0';
    }
});

また、テンプレート側は次のように変数check_as_valueがpreCheckboxとpostCheckboxに挟まれた形になります。

<input id="check_as_value" type="checkbox" data-link="{preCheckbox:check_as_value:postCheckbox}"/>

JSFiddleで動作を見る

参照