Vuejsを使用せず、テンプレートを作成する JavaScript

2020年1月29日

Vuejsで使用できるテンプレートが非常に便利だと感じたので、実装してみました。

 

ソース

document.addEventListener('DOMContentLoaded', function() {
    var callTemplate = '';
    var templateList = document.querySelectorAll('usertemplate');
    for (var t = 0; templateList.length > t; t++){
    callTemplate = document.getElementsByTagName(templateList[t].id);
        for (var i = 0; callTemplate.length > i; i++){
            callTemplate[i].innerHTML = templateList[t].innerHTML;
        }
    }
});

 

 

利用方法

テンプレート化したいソースを<usertemplate>タグで囲い、テンプレート名をidに入れます。

例えば、こんな感じ。

<usertemplate id="samplecode">
    <h1>サンプル</h1>
    <input type="text"></input>
</usertemplate>

 

と記述されていた場合、

<samplecode></samplecode>

 

と記述した箇所に、テンプレートの中身である

<h1>サンプル</h1>
<input type="text"></input>

 

が生成されます。

 

しかし、このままではテンプレート自体も表示されてしまうため、

<style> 
usertemplate{
    display:none; 
}
</style>

 

テンプレートを非表示にする記述も必要になります。

 

scriptタグで囲えばいいじゃないか

Vuejsではテンプレート作成時、scriptタグで囲います。

これは、scriptタグであれば、domは生成されるが、画面に表示されないため、styleを設定する必要もなく、スマートだから、ということなのではないかと思います。

しかしながら、scriptタグで囲んでしまうと、scriptタグ自体のdomにはアクセスできますが、その中のdomにアクセスできなくなってしまい、テンプレートの中にテンプレートを作成できなくなってしまうため、上記のような方法で実装しました。

 

 

IT, javascript, Vuejs

Posted by took