Hatena::ブログ(Diary)

黒羊工房はてな版

2011-03-26

[][][]jQueryテンプレートプラグインjquery-tmpl」を使ってみた (多分)その1

追記:続編書きました。
リンクは一番下に

最近jQueryにはまっているひつじです。こんにちは。

jQueryに限らず、JavascriptDOMをいじっていると

var name = 'bsheep';
$('<div>').addClass('name').text(name).appendTo('#profile');
//
// <div id="profile"></div>
//        ↓
// <div id="profile"><div class="name">bsheep</div></div>
//

こんな感じでDOMをその場で生成して埋め込みとかいう操作が結構あります。


でも、こういうの書いているとHTMLscriptとを分離したくなってきますよね!


 この書き方のまま複雑なものとか作ってると、できあがりのHTMLの構造を読み取るための思考コストがかなり必要で苦労します。書いてる時は平気なんですけど後で見たときに。

 そういう時に、できるだけHTMLの完成形に近づけて書こうとすれば書けるんですけど

var name = 'bsheep';
$('#profile').html('<div class="name">' + name + '</div>');

こういうコードが並んでいると非常にげんなりしてしまいますね(+とか入力したくない)

もしくはこんな感じ

var name = 'bsheep';
$('#profile').html($('<div>').addClass('name').text(name));

これくらいの構造ならなんとかなりますが、複雑なものを作ろうとすると大変です。

そこで

アプリケーションHTMLとの分離といえばテンプレートです。

javascriptテンプレートはいくつかあるみたいですが、jQueryの公式プラグインにあるjquery-tmplを使ってみました。

ここまでが前座です。妙に冗長な気がします

jQuery-tmpl

jquery-tmplを使うにはgithubからダウンロードして使うか、MicrosoftのCDNなども利用できるようです。

 またjQuery本体は1.4.2以上が必要なのでこちらも用意しておきます。

使い方

使い方の基本はこんな感じです


tmpl関数の第一引数テンプレートを渡して、第二引数に埋め込むデータオブジェクトを渡します。

$.tmpl('hello <b>${name}</b> !', { name: 'bsheep' }).appendTo('#main');

scriptタグにtype="text/x-jquery-tmpl"を指定することで、テンプレートHTML内に埋め込めますので

<div id="main"></div>

<script id="tmpl_info" type="text/x-jquery-tmpl">
<div class="person">
    <div class="name">${name}</div>
    <div class="place">${place}</div>
</div>
</script>

<script type="text/javascript">
$('#tmpl_info').tmpl({ name: 'bsheep', place: 'tokyo' }).appendTo('#main');
</script>

こんな感じでほぼHTMLの構造そのままにテンプレートを書くこともできます。

<div id="main">
    <script id="tmpl_info" type="text/x-jquery-tmpl">
    <div class="person">
        <div class="name">${name}</div>
        <div class="place">${place}</div>
    </div>
    </script>
</div>

配列で渡す

データを配列で渡すとテンプレート全体を自動で配列分ループしてくれます

var data = [
{ name: 'asheep', place: 'america' },
{ name: 'bsheep', place: 'britain' }
];
$('#tmpl_info').tmpl(data).appendTo('#main');

//
//<div id="main">
//    <div class="person">
//        <div class="name">asheep</div>
//        <div class="place">america</div>
//    </div>
//    <div class="person">
//        <div class="name">bsheep</div>
//        <div class="place">britain</div>
//    </div>
//</div>
//

条件

{{if}}, {{/if}}で条件分岐することができます

<div id="main">
    <script id="tmpl_info" type="text/x-jquery-tmpl">
    <div class="person">
        <div class="name">name: ${name}</div>
        <div class="place">place: ${place}</div>
        {{if flag == 1}}
        <div class="flag">flag: ${flag}</div>
        {{/if}}
    </div>
    </script>
</div>
var data = [
{ name: 'asheep', place: 'america', flag: 2 },
{ name: 'bsheep', place: 'britain', flag: 1 }
];
$('#tmpl_info').tmpl(data).appendTo('#main');


//
//<div id="main">
//    <div class="person">
//        <div class="name">name: asheep</div>
//        <div class="place">place: america</div>
//    </div>
//    <div class="person">
//        <div class="name">name: bsheep</div>
//        <div class="place">place: britain</div>
//        <div class="flag">flag: 1</div>
//    </div>
//</div>
//

ループ

引数で渡したオブジェクト内の配列は{{each}}, {{/each}}でループをまわします

ループ中の要素はハッシュであればそのキーで取得できます

var data = [
{ name: 'asheep', place: 'america', food: [{name: 'peach'}] },
{ name: 'bsheep', place: 'britain', food: [{name: 'apple'}, {name: 'orange'}, {name: 'banana'}] }
];
$('#tmpl_info').tmpl(data).appendTo('#main');
<div id="main">
    <script id="tmpl_info" type="text/x-jquery-tmpl">
    <div class="person">
        <div class="name">name: ${name}</div>
        <div class="place">place: ${place}</div>
        <div class="food">food:
            {{each food}}
            <div class="item">item: ${name}</div><!-- food.nameではなく、直接name -->
            {{/each}}
        </div>
    </div>
    </script>
</div>

配列の中身が直接文字列だった場合はthisで取得することができます

var data = [
{ name: 'asheep', place: 'america', food: ['peach'] },
{ name: 'bsheep', place: 'britain', food: ['apple', 'orange', 'banana'] }
];
$('#tmpl_info').tmpl(data).appendTo('#main');
<div id="main">
    <script id="tmpl_info" type="text/x-jquery-tmpl">
    <div class="person">
        <div class="name">name: ${name}</div>
        <div class="place">place: ${place}</div>
        <div class="food">food:
            {{each food}}
            <div class="item">item: ${this}</div>
            {{/each}}
        </div>
    </div>
    </script>
</div>

この辺で

ちょっと長くなってきたのでこの辺で一旦区切ります。

だいたいこれくらいあれば一通りやりたい事はできると思います。

スルーしていた第3引数やその他の機能は面白そうだったら次回まとめます

続編書きました

>>jQueryのテンプレートプラグイン「jquery-tmpl」を使ってみた (多分)その2

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/bsheep/20110326/1301122903