解放区在住氷翠 緑の閃光

Jqueryでテンプレート

2016-06-15 18:32

自分なりに作ってみたJqueryを利用したテンプレート。

<div class="frame" data-content="main">
</div>

コンテンツのフレームをつくる目的で作ったので、重要な部分以外はカット。
で、重要な部分はここ。

今回はカスタムデータ属性というのを利用しています。

要は、このカスタムデータ属性のあるタグの中にコンテンツを入れてしまおうというもの。
上記のHMTLは別ファイルで保存しておきます。
仮に、このテンプレートファイルを「temp.html」としておきましょう。

$(function(){
    // テンプレートのURL
    var $template = "temp.html";
    $("section.frame").each(function(index, element) {
        // コンテンツを保管しておく
        var $contents = $(element).html();
        // セクションのコンテンツにするテンプレートを読み込む
        $(element).load($template, function(){
            $(element).find("[data-content='main']").html($contents);
        });
    });
});

ということで、上記のスクリプトが重要。
最初にテンプレートファイルのURLを何度でも呼べるように変数に。
で、次の「each」メソッドは、そのページの中でコンテンツのフレームを何度も使う場合に使っているだけなので、一度しか使わないという時はこれを使う必要はありません。
その中身ですが、まずは、コンテンツであるHTMLを変数に保管しておきます。
次、あと3行しかありませんが、考え方は簡単。
「element」となっているところは現在選択されているタグです。そこにjqueryの標準で用意されている「load」メソッドを利用してテンプレートを埋め込みます。
で、その読み込みが終了したら、そのfunctionの部分です。
現在のタグの中から「data-content=’main’」というカスタムデータ属性がついた部分を探しだし、そのタグの中に、最初に準備したコンテンツのHTMLを入れてしまう。

これだけのものです。