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() {
    // 表示するデータ
    var message = {
        radio: '1'
    };

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

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

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

    <div>
        <label for="radio1"><input id="radio1" type="radio" name="radio" value="1" data-link="radio"/>ラジオ1</label>
        <label for="radio2"><input id="radio2" type="radio" name="radio" value="2" data-link="radio"/>ラジオ2</label>
        <label for="radio3"><input id="radio3" type="radio" name="radio" value="3" data-link="radio"/>ラジオ3</label>
    </div>
</script>
</body>
</html>

説明

フォーム要素と変数の値をデータリンクさせたい場合、基本的には、JsViewsチュートリアル - まずはHello World - Do You PHP はてなで出てきたdata-link属性を使ってリンクしたい変数を指定します。今回はラジオボタン(input要素のtype属性が"radio")の例です。
基本的にはselect要素と同様、ラジオボタンにdata-link属性を付けてリンクさせる変数を指定します。通常、複数のラジオボタンを用意すると思いますが、そのいずれにもdata-link属性と同じ変数を指定します。

<input type="radio" name="radio" value="1" data-link="radio"/>
<input type="radio" name="radio" value="2" data-link="radio"/>
<input type="radio" name="radio" value="3" data-link="radio"/>

ブラウザ上から選択された項目が変更されたタイミングで変数の値が変化し、値はvalue属性の値になります。

JSFiddleで動作を見る

参照