Do You PHP はてブロ

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

JsViewsチュートリアル - フォーム要素とデータリンク(チェックボックス＋コンバータでvalue属性の値を使う)

jsviews

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

今回やること

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

コード

<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({
        preCheckboxWithValue: function (value) {
//            console.log(this);
            var v = this.linkCtx.elem.value ? this.linkCtx.elem.value : null;
            return value === v ? true : false;
        },
        postCheckboxWithValue: function (value) {
//            console.log(this);
            var v = this.linkCtx.elem.value ? this.linkCtx.elem.value : null;
            return value == true ? v : null;
        }
    });

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

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

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

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

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

説明

1つ前のエントリではコンバータを使ってチェックボックスとデータリンクさせた場合の値を"0"と"1"に変換する例を見てきましたが、どうせならチェックボックスのvalue属性の値にしたいですよね？
コンバータとして定義した関数内では、自身を表す"this"を使って現在対象となっている要素やViewオブジェクトなどの"コンテキスト情報"を取得することができます。
たとえば、現在のコンバータが対象としている変数はtagCtx(タグコンテキスト)を使って

this.tagCtx.params.args

その値は

this.tagCtx.args

また、リンクされた変数の値は

this.linkCtx._val

といった具合です。実際にコンバータ関数の中でconsole.log()等で値を確認してみると良いです。
で、この中に、現在コンバータが対象としているHTML要素も

this.linkCtx.elem

で取得でき、そのvalue属性の値を

this.linkCtx.elem.value

で参照できます。これを使うことでvalue属性の値を結果の値とすることができます。

JSFiddleで動作を見る

参照