Do You PHP はてブロ

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

JsViewsチュートリアル - スタイルをリンクさせる

jsviews

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

今回やること

JsViewsでスタイルと変数をリンクさせる

コード

<html>
<body>

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

<style type="text/css">
<!--
.box {
    border: 1px solid;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
-->
</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 = {
        text: 'Hello !',
        width: 150,
        height: 100,
        bgcolor: 'lightgray'
    };

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

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <div class="box" data-link="
        {:text}
        css-color{:bgcolor != '' ? 'white' : ''}
        css-background-color{:bgcolor}
        css-width{:width}
        css-height{:height}"
    >
    </div>
    <div>
        <p>表示するテキスト</p>
        <input type="text" data-link="text trigger=true"/>
    </div>
    <div>
        <p>幅</p>
        <select data-link="width">
        <option value="100">100</option>
        <option value="150">150</option>
        <option value="200">200</option>
        </select>
    </div>
    <div>
        <p>高さ</p>
        <select data-link="height">
        <option value="100">100</option>
        <option value="150">150</option>
        <option value="200">200</option>
        </select>
    </div>
    <div>
        <p>背景色</p>
        <select data-link="bgcolor">
        <option value="">なし</option>
        <option value="lightgray">lightgray</option>
        <option value="blue">blue</option>
        <option value="red">red</option>
        <option value="green">green</option>
        </select>
    </div>
</script>
</body>
</html>

説明

JsViewsチュートリアル - HTML要素の属性をデータリンクする - Do You PHP はてなでは属性と変数をリンクさせましたが、スタイルと直接リンクさせる事もできます。
書式ですが、属性名の代わりにプロパティ名に"css-"を付けたものになります。

data-link="css-[プロパティ名]{:[変数もしくは式]}

たとえば、colorプロパティであれば"css-color"、background-colorプロパティであれば"css-background-color"になります。
コード例では、

  • width
  • height
  • background-color

の3つを変数と直接リンクさせ、colorプロパティについてはbackground-colorプロパティの値が指定された場合に"white"となるように記述しています。

JSFiddleで動作を見る

参照