templateをtemplateらしく使う

index.html

<template></template>

テンプレートタグなるものを使いたいとき、調べた限りだとcloneして要素にデータを挿入してappendChildするように、ということだった。
参考 : Qiita - template要素の使い方、知ってます？
この「要素にデータを挿入」の処理が気に入らず、テンプレートらしく使う方法を考えたのでメモ。

##templateをこういう感じで書きたい

index.html

<ul id="my_list">
	<template id="my_template">
		<li class="{{class_name}}">
			<a href="{{url}}">
				<h1>{{title}}</h1>
				<p>{{text}}</p>
			</a>
		</li>
	</template>
	<!--ここにリストを追加したい-->
</ul>

##こんな感じで書けばいけました

template_to_html.js

var obj = { //追加したいデータ
	class_name: 'list_item',
	url: 'https://qiita.com',
	title: 'タイトル',
	text: '本文'
};

//テンプレートから書き込みデータを作成
function template_to_html(template_id,obj){
	//文字列としてテンプレートのinnerHTMLを取得
	var str = $(template_id)[0].innerHTML;
	//{{}}で囲まれた文字列を検索するための正規表現
	var reg = /{{[a-zA-Z1-9_\-]*}}/g;
	var arr,replaced = str;
	while((arr = reg.exec(str))!==null){
		//{{}}で囲まれた文字列をobjのキーとして置換
		var key = arr[0].replace('{{','').replace('}}','');
		replaced = replaced.replace(arr[0],obj[key]);
	};
	return replaced;
};

//書き込み処理
$('ul#my_list').append(template_to_html('#my_template',obj));

##実行結果

result.html

<ul id="my_list">
	<template id="my_template">
		<!-- 中略 -->
	</template>
	<!--こういう感じで追加される-->
	<li class="list_item">
		<a href="https://qiita.com">
			<h1>タイトル</h1>
			<p>本文</p>
		</a>
	</li>
</ul>

##補足

• objのキーと{{}}内の文字列を揃えるのが大事。
• objを配列に入れて、書き込み処理をぐるぐる回せば連続で追加できる。
• 正規表現の書き方とかreplaceの仕方とかもっとスマートな書き方があるかも。innerHTMLで文字列として取得して置き換えるというのがポイント。
• appendのところをjQuery使わずにappendChildとすると、文字列として挿入されてしまう。htmlとして挿入できれば、脱jQueryも可。

##修正

• 21/7/16 11:00 正規表現で-と_を使えるように修正しました。