head 内にすべてのテンプレートタグを挿入するのが最善ですか?
このようにすれば、コードがよりきれいになり、要素をレンダリングできるアイテムとそうでないアイテムに分割できると思います。あなたは自分自身をどう思いますか、または何を使いますか?
head 内にすべてのテンプレートタグを挿入するのが最善ですか?
このようにすれば、コードがよりきれいになり、要素をレンダリングできるアイテムとそうでないアイテムに分割できると思います。あなたは自分自身をどう思いますか、または何を使いますか?
これは、個人の好みとテンプレートのコンテキストに基づいています。W3 標準ではメタデータ コンテンツが許可されているため、このタグは要素template
内に配置できます。また、要素は実際にメタデータにすることができます。ただし、W3 のコード例(以下に再掲) は、使用する予定の場所の近くに配置されていることを示しています。head
template
<!DOCTYPE html>
<title>Cat data</title>
<script>
// Data is hard-coded here, but could come from the server
var data = [
{ name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
];
</script>
<table>
<thead>
<tr>
<th>Name <th>Color <th>Sex <th>Legs
<tbody>
<template id="row">
<tr><td><td><td><td>
</template>
</table>
<script>
var template = document.querySelector('#row');
for (var i = 0; i < data.length; i += 1) {
var cat = data[i];
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = cat.name;
cells[1].textContent = cat.color;
cells[2].textContent = cat.sex;
cells[3].textContent = cat.legs;
template.parentNode.appendChild(clone);
}
</script>