memorandum
thinking about creation

HTMLの構造を壊さずにテンプレート出力できる「jquery.clone_blocks.js」

Entry Date _ 2020.02.14
/
ModifiedDate _ 2020.02.14

前回のエントリーでつくった習作を改良してjQueryプラグインにしてみました。

この jquery.clone_blocks は、簡易的なテンプレート・エンジンです。
特徴はHTMLの構造を壊さずにテンプレート出力できるということです。

jsRenderなど既存のテンプレート・エンジンを使えばいいだけのような気もしますが、独自のマークアップを加えなければならないとか、テンプレートを<script>タグで囲み<head>の中に置かなきゃならないことなどが、どーもHTMLソースをわかりずらくしているような気がして...。
どうにかHTMLの構造を壊さずテンプレート出力できないものかと考えていたのです。

このプラグインでやっていることは単純で、HTMLの要素をテンプレートとして指定し、それを内容を書き換えて複製(クローン)し、追加しているだけです。検索結果を表示するなどの時に使えるかもしれません。

サンプルを表示する

clone_blocksのテンプレート

まず、テンプレートと複製したものを追加する要素をつくります。ここでは「#result-block」としましたが、名前はなんでも構いません。

そして、その中にテンプレートとなる「.clone-template」をつくります。この名前は固定ですので名前を変えずに、このまま指定してください。

さてテンプレートができました。この状態であれば、このファイルのままブラウザにドロップしても、正しいレイアウトで表示されるはずです。

次に、 jquery.clone_blocks.js を読み込みます。(※読み込んだ後はテンプレートは表示されなくなります)

jquery.clone_blocks.jsのダウンロード

テンプレート出力

まずテスト用のJSONを用意します。新たにつくるのは面倒なので、下記URLで得られるiTunesのJPOPチャート上位10件のデータを使います。(JSON.feed.result)

https://rss.itunes.apple.com/api/v1/jp/itunes-music/top-songs/all/10/explicit.json

そして以下のようにJSからプラグインをコールします。

$('追加する要素のセレクタ').clone_blocks({
    item: [
            [ '属性',  'セレクタ',  '値' ],
            [ 'html',  'セレクタ',  '値' ],
            [ 'css'',  'セレクタ',  '値' ]
    ]
});

属性は hrefsrc などを指定することができます。そして htmlcss を指定することができます。

_result.forEach(function(_obj){

    $('#result-block').clone_blocks({
        'item':[
            ['src',  '.artwork', _obj.artworkUrl100],
            ['href', '.url',    _obj.url],
            ['html', '.name .url', _obj.name],
            ['href', '.artist', _obj.artistUrl],
            ['html', '.artist', _obj.artistName]
        ]
    })

});

jsRender より少しコードの量は増えますが、やりたいことが明確になって、そこそこわかりやすくなっていると思うのですが、いかがでしょう。

オプション

あと、少しだけオプションが指定できます。

display: block / inline / inline-block

テンプレートの要素を出力する時の display の値を指定します。なにも指定しないと「block」になります。サンプルでは「block」と「inline」を用意しました。

output_result: function($blk){ 処理 }

要素が追加された後の処理を書くことができます。サンプルでは透明→不透明にアニメーションさせています。

Category

memorandum index