Do You PHP はてブロ

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

JsViewsチュートリアル - HTML要素の属性値のトグル

jsviews

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

今回やること

JsViewsでHTML要素の属性値をデータリンクさせた変数の値を使ってトグルさせる

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<div id="result"></div>

<style type="text/css">
<!--
.label { font-weight: bold; }
.red { color: #e03fac; }
-->
</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 data = {
        mode: '1'
    };

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

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <div>
        <p>現在のmode：<span data-link="mode"></span></p>
        <label for="mode1">
            <input type="radio" id="mode1" name="radio" value="1" data-link="mode"/>
            <span class="label" data-link="class{merge:mode == '1' toggle='red'}">ラジオ1</span>
        </label>
        <label for="mode2">
            <input type="radio" id="mode2" name="radio" value="2" data-link="mode"/>
            <span class="label" data-link="class{merge:mode == '2' toggle='red'}">ラジオ2</span>
        </label>
        <label for="mode3">
            <input type="radio" id="mode3" name="radio" value="3" data-link="mode"/>
            <span class="label" data-link="class{merge:mode == '3' toggle='red'}">ラジオ3</span>
        </label>
    </div>
</script>
</body>
</html>

説明

JsViewsチュートリアル - HTML要素の属性をデータリンクする - Do You PHP はてなでは属性値そのものををデータリンクした変数とリンクさせましたが、「変数が○○○の時だけ特定の属性を追加する」といった属性の値の一部をトグルさせる事もできます。
書式ですが、mergeコンバータを使って次のようになります。

data-link="[属性名]{merge:[変数もしくは式] toggle='[トグルさせる値]'}

変数もしくは式がtrueと判定された場合に限り、指定した属性名に"トグルさせる値"が追加されます。それ以外の場合は追加されません。
たとえば、「特定の場合だけclass属性に"active"というクラスを追加する」といった感じです。コード例では、ラジオボタンが選択された場合のみラベルに色を付けています。
なお、最初から指定されていた属性値はtoggleによる影響を受けません。コード例の場合だと、"label"クラスは上書きされずに残ります。

JSFiddleで動作を見る

参照