1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: <template>
slug: Web/HTML/Element/template
tags:
- Элемент
translation_of: Web/HTML/Element/template
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML элемент контент шаблона <code><template></code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p>
<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code><template></code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting element</a></td>
</tr>
<tr>
<th scope="row">Допустимый контент</th>
<td>Нет ограничений</td>
</tr>
<tr>
<th scope="row">Закрывающий тег</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Разрешенные родители</th>
<td>Any element that accepts <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Metadata_content">metadata content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, or <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">script-supporting elements</a>. Also allowed as a child of a {{HTMLElement("colgroup")}} element that does <em>not</em> have a {{htmlattrxref("span", "colgroup")}} attribute.</td>
</tr>
<tr>
<th scope="row">Неявные роли ARIA</th>
<td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
</tr>
<tr>
<th scope="row">Разрешенные роли ARIA</th>
<td>Отсутствует</td>
</tr>
<tr>
<th scope="row">DOM интерфейс</th>
<td>{{domxref("HTMLTemplateElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты">Атрибуты</h2>
<p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p>
<p>Также есть доступный только для чтения атрибут <code>content</code>, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузер элемент <code><template></code>.</p>
<h2 id="Примеры">Примеры</h2>
<p>Начнём с HTML.</p>
<pre class="brush: 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>
</pre>
<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p>
<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p>
<pre class="brush:js;">// Проверяем поддерживает ли браузер тег <template>
// проверив наличие атрибута 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> не поддерживается браузером
}
</pre>
<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p>
<div class="hidden">
<pre class="brush: css">table {
background: #000;
}
table td {
background: #fff;
}</pre>
</div>
<p>{{EmbedLiveSample("Example", 500, 120)}}</p>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_браузера">Совместимость браузера</h2>
<p>{{Compat("html.elements.template")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Веб компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
<li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
</ul>
|
