diff options
| -rw-r--r-- | files/ru/web/html/element/template/index.html | 138 |
1 files changed, 84 insertions, 54 deletions
diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html index 2e4ee629db..e6ead297ab 100644 --- a/files/ru/web/html/element/template/index.html +++ b/files/ru/web/html/element/template/index.html @@ -1,21 +1,32 @@ --- -title: <template> +title: '<template>: элемент шаблона контента' slug: Web/HTML/Element/template tags: - Элемент + - HTML + - HTML Веб-компоненты + - HTML:Основной поток + - HTML:Метаданные + - HTML:Фразовый контент + - HTML:Элементы поддержки скриптов + - Справочник + - Шаблон + - Веб + - Веб-компоненты translation_of: Web/HTML/Element/template +browser-compat: html.elements.template --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML элемент контент шаблона <code><template></code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p> +<p><a href="/en-US/docs/Web/HTML">HTML</a>-элемент шаблона контента <strong><code><template></code></strong> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.</p> -<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code><template></code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p> +<p>Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <strong><code><template></code></strong> во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.</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> + <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th> + <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#основной_поток">основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a></td> </tr> <tr> <th scope="row">Допустимый контент</th> @@ -27,7 +38,7 @@ translation_of: Web/HTML/Element/template </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> + <td>Любые элементы, которые могут содержать <a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a> или <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a>. Допускается вкладывать элемент в {{HTMLElement("colgroup")}}, у которого <em>отсутствует</em> атрибут {{htmlattrxref("span", "colgroup")}}.</td> </tr> <tr> <th scope="row">Неявные роли ARIA</th> @@ -44,13 +55,13 @@ translation_of: Web/HTML/Element/template </tbody> </table> -<h2 id="Атрибуты">Атрибуты</h2> +<h2 id="Attributes">Атрибуты</h2> <p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p> -<p>Однако у <a href="/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a> есть свойство <code>content</code>, которое возвращает доступный только для чтения <a href="/ru/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое испоользование значения <a href="/en-US/docs/Web/API/HTMLTemplateElement/content" title="content"><code>content</code></a> может привести к непредсказуемому поведению.</p> +<p>Однако у <code>{{domxref("HTMLTemplateElement")}}</code> есть свойство <code>{{domxref("HTMLTemplateElement.content", "content")}}</code>, которое возвращает доступный только для чтения <code>{{domxref("DocumentFragment")}}</code>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения <code>{{domxref("HTMLTemplateElement.content", "content")}}</code> может привести к непредсказуемому поведению, см. раздел <a href="#avoiding_documentfragment_pitfall">ловушка <code>DocumentFragment</code></a> ниже.</p> -<h2 id="Примеры">Примеры</h2> +<h2 id="Examples">Примеры</h2> <p>Начнём с HTML.</p> @@ -62,7 +73,7 @@ translation_of: Web/HTML/Element/template </tr> </thead> <tbody> - <!-- existing data could optionally be included here --> + <!-- данные будут вставлены сюда --> </tbody> </table> @@ -74,40 +85,42 @@ translation_of: Web/HTML/Element/template </template> </pre> -<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p> +<p>Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.</p> -<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p> +<p>Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.</p> -<pre class="brush:js;">// Проверяем поддерживает ли браузер тег <template> -// проверив наличие атрибута content у элемента template +<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"); + // Находим элемент tbody таблицы + // и шаблон строки + var tbody = document.querySelector("tbody"); + var template = document.querySelector('#productrow'); + + // Клонируем новую строку и вставляем её в таблицу + var clone = template.content.cloneNode(true); + var td = clone.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); + tbody.appendChild(clone); - // создаём новую строку + // Клонируем новую строку ещё раз и вставляем её в таблицу + var clone2 = template.content.cloneNode(true); + td = clone2.querySelectorAll("td"); td[0].textContent = "0384928528"; - td[1].textContent = "Acme Kidney Beans"; + td[1].textContent = "Acme Kidney Beans 2"; - // клонируем новую строку и вставляем её в таблицу - var clone2 = document.importNode(t.content, true); - tb[0].appendChild(clone2); + tbody.appendChild(clone2); } else { - // необходимо найти другой способ добавить строку в таблицу т.к. - // тег <template> не поддерживается браузером + // Иной способ заполнить таблицу, потому что + // HTML-элемент template не поддерживается. } </pre> -<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p> +<p>Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:</p> <div class="hidden"> <pre class="brush: css">table { @@ -118,39 +131,56 @@ table td { }</pre> </div> -<p>{{EmbedLiveSample("Example", 500, 120)}}</p> +<p>{{EmbedLiveSample("Examples", 500, 120)}}</p> -<h2 id="Specifications" name="Specifications">Спецификации</h2> +<h2 id="Avoiding_DocumentFragment_pitfall">Ловушка <code>DocumentFragment</code></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> +<p>{{domxref("DocumentFragment")}} не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.</p> + +<p>Рассмотрим следующие HTML-разметку и JavaScript-код:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"></div> + +<template id="template"> + <div>Click me</div> +</template></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const container = document.getElementById("container"); +const template = document.getElementById("template"); + +function clickHandler(event) { + event.target.append(" — Clicked this div"); +} + +const firstClone = template.content.cloneNode(true); +firstClone.addEventListener("click", clickHandler); +container.appendChild(firstClone); + +const secondClone = template.content.firstElementChild.cloneNode(true); +secondClone.addEventListener("click", clickHandler); +container.appendChild(secondClone);</pre> + +<h3 id="Result">Результат</h3> + +<p>В переменной <code>firstClone</code> у нас экземпляр (клон) <code>DocumentFragment</code>, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной <code>secondClone</code> у нас экземпляр (клон) <code>{{domxref("HTMLDivElement")}}</code>, клик по которому работает как ожидается.</p> + +<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p> -<h2 id="Совместимость_браузера">Совместимость браузера</h2> +<h2 id="Specifications">Спецификации</h2> +<p>{{Specifications}}</p> +<h2 id="Browser_compatibility">Совместимость с браузерами</h2> -<p>{{Compat("html.elements.template")}}</p> +<p>{{Compat}}</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> + <li>Веб-компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li> + <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li> </ul> |