Do You PHP はてブロ

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

JsViewsチュートリアル - フォーム要素とデータリンク(select要素)

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

今回やること

JsViewsでselect要素をデータリンクさせる

コード

<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 = {
        select: '2',
        multiple: [1, 3]
    };

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

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

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

    <div>
        <select id="select" data-link="select">
            <option value="1">セレクト1</option>
            <option value="2">セレクト2</option>
            <option value="3">セレクト3</option>
        </select>
    </div>
    <div>
        <select id="multiple" multiple data-link="multiple">
            <option value="1">マルチプル1</option>
            <option value="2">マルチプル2</option>
            <option value="3">マルチプル3</option>
        </select>
    </div>
</script>
</body>
</html>

説明

フォーム要素と変数の値をデータリンクさせたい場合、基本的には、JsViewsチュートリアル - まずはHello World - Do You PHP はてなで出てきたdata-link属性を使ってリンクしたい変数を指定します。今回はselect要素(プルダウン)の例で、単一選択と複数選択の2種類の動作が確認できるサンプルです。
select要素にdata-link属性を付け、リンクさせる変数を指定します。

<select id="select" data-link="select"></select>

ブラウザ上から選択された項目が変更されたタイミングで変数の値が変化し、値はoption要素のvalue属性の値(文字列)になります。また、multiple属性を付けた場合も同様ですが、変数の値は文字列の配列、非選択時はnullになります。

JSFiddleで動作を見る