Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Summary
HTML элемент <template> — это механизм для отложенного рендера клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.
Template можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <template> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.
- Content categories Metadata content, flow content, phrasing content, script-supporting element
- Permitted content Metadata content, flow content, any valid HTML content that is permitted to occur within the
<ol>,<dl>,<figure>,<ruby>,<object>,<video>,<audio>,<table>,<colgroup>,<thead>,<tbody>,<tfoot>,<tr>,<fieldset>,<select>,<details>elements and<menu>whosetypeattribute is in popup menu state. - Tag omission None, both the starting and ending tag are mandatory.
- Permitted parent elements
<body>,<frameset>,<head>and<colgroup>without aspanattribute - DOM interface
HTMLTemplateElement
Атрибуты
Элемент может имеет общие атрибуты.
Так же есть доступный только для чтения аттрибут content, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузет элемент <template>.
Примеры
Начнём с HTML.
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
Для начала у насть есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы
Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.
// Проверяем поддерживает ли браузер тег <temlate>
// проверив наличие аттрибута content у элемента template
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody and the row with the template
var t = document.querySelector('#productrow'),
td = t.content.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
// клонируем новую строку и вставляем её в таблицу
var tb = document.getElementsByTagName("tbody");
var clone = document.importNode(t.content, true);
tb[0].appendChild(clone);
// создаём новую строку
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans";
// клонируем новую строку и вставляем её в таблицу
var clone2 = document.importNode(t.content, true);
tb[0].appendChild(clone2);
} else {
// необходимо найти другой способ добавить строку в таблицу т.к.
// тег <template> не поддерживатся браузером
}
Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:
table {
background: #000;
}
table td {
background: #fff;
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard Определение 'template element' в этой спецификации. |
Живой стандарт | No change |
| HTML5 Определение 'template element' в этой спецификации. |
Рекомендация | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 26 | 22 (22) | Нет | 15 | 7.1 |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | iOS 8 |