Do You PHP はてブロ

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

JsViewsチュートリアル - HTML要素の属性をデータリンクする

jsviews

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

今回やること

JsViewsでHTML要素の属性をデータリンクさせる

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<p>テキストボックスに入力すると表示されたデータが更新される</p>
<div id="result"></div>

<style type="text/css">
<!--
.green { color: #3fe0ac; }
-->
</style>
<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 = {
        greet: 'Hello !',
        color: 'green',
        type: 'password',
        id: 'message',
        multiple: true
    };

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

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <div>
        <p><span data-link="{:greet} class{:color}"></span></p>
        <div><input data-link="{:greet trigger=true} type{:type} id{:id}"/></div>

        <select id="select" data-link="multiple{:multiple}">
        <option value="1">セレクト1</option>
        <option value="2">セレクト2</option>
        <option value="3">セレクト3</option>
        </select>
    </div>
</script>
</body>
</html>

説明

1つ前のエントリと同様、JsViewsではフォーム要素のvalue値や可視性(visibility)だけではなく、classやtype、idなど他のHTML属性ともリンクさせることができます。
書式は次のようになります。1つ前のエントリの一般形ですね。

<[HTML要素名] ... data-link="[属性名]{:[変数もしくは式]} ..." />

また、以下のように複数同時に設定することも可能です。1つ前のエントリにあるvisibleも同様です。

<div data-link="id{:id} class{:color} visible{:visibility}">...</div>

ただし、"input要素のvalue属性の値と、他の属性値を同時に指定したい"といった場合、前者の書き方を以下のようにする必要があります。

{:[変数名]:}

これを

{:[変数名]}

としてしまうと、フォーム要素で変更した値がリンクした変数に反映されません。一方、span要素やdiv要素など、値を変更することができない要素の場合はいずれの記述でも問題ありません。

JSFiddleで動作を見る

参照