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() { // 表示するデータ var message = { check: false }; // テンプレートに名前(ここでは"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"><input id="check" type="checkbox" data-link="check"/>チェックボックス</label> </div> </script> </body> </html>
説明
フォーム要素と変数の値をデータリンクさせたい場合、基本的には、JsViewsチュートリアル - まずはHello World - Do You PHP はてなで出てきたdata-link属性を使ってリンクしたい変数を指定します。今回はチェックボックス(input要素のtype属性が"checkbox")の例です。
基本的にはselect要素やラジオボタンと同様、チェックボックスにdata-link属性を付けてリンクさせる変数を指定します。
<input id="check" type="checkbox" data-link="check"/>
ブラウザ上から選択された項目が変更されたタイミングで変数の値が変化します。ただし、値がvalue属性の値ではなくbool型(true/false)になることに注意してください。