JsViewsチュートリアル - フォーム要素とデータリンク(チェックボックス+コンバータでvalue属性の値を使う)
JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsViews入門 - Do You PHP はてなも参照してください。
コード
<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属性の値を結果の値とすることができます。