Элемент HTML-шаблона: Уточнение

Я недавно обнаружил элемент HTML template и хотел бы получить некоторые разъяснения.Элемент HTML-шаблона: Уточнение

Насколько я могу сказать, что три отличительные черты:

template не отображается на экране
template не делает свой путь к DOM
есть дополнительный content недвижимость который действует как виртуальный элемент между template и его содержанием

Помимо этого, <template>, возможно, был div, скрытый от экрана и DOM. В этом отношении JavaScript, используемый для использования template, такой же, как если бы он пытался подделать один, используя div.

Вопрос в том, что это правильно? Я спрашиваю, потому что:

Мне просто нужно, чтобы получить это ясно в моем сознании
было бы относительно легко подделать один для nonsupporting браузеров.

Благодаря

источник

2016-06-28 Manngo

Есть несколько основных различий:

Script (<script>) в <template> элемента не выполняется немедленно.
Медиаконтент (<audio>, <video>, <img>) внутри шаблона не будет загружен immedialtey.

Вместо этого они будут выполнены или загружены после их установки в обработанное дерево DOM.
querySelector() вызовы методов и CSS селекторы не будет исследовать содержимое <template>, но вы все еще можете получить доступ к элементам внутри с помощью querySelector() на его имущество content.
С шаблон HTML5, вы можете получить доступ ко всем его содержание в виде Document Fragment, и вставить его в дереве DOM с использованием appendChild(), вместо изменения innerHTML.
<template> элементы могут быть размещены в элементе <head>.
Вы получаете доступ к содержимому шаблона в виде строки с использованием .innerHTML или в качестве документа с использованием .content.

Это довольно сложно, чтобы подделать все эти поведения. Есть some polyfills, которые могут частично это сделать. Я бы рекомендовал Neovov's one.

Посмотрите на этот иллюстративный пример:

//explore the content of the template 
 
var script = T1.content.querySelector('script') 
 
console.log(script.innerHTML) 
 

 
function insert() { 
 
    //insert the real templete 
 
    Target1.appendChild(T1.content.cloneNode(true)) 
 
    //insert the fake template 
 
    Target2.innerHTML += D1.innerHTML 
 
}

<template id=T1> 
 
    Real Template - 
 
    <script>console.log('executed at each insertion')</script> 
 
</template> 
 

 
<div hidden id=D1> 
 
    Fake Template - 
 
    <script>console.log('executed only at parsing')</script> 
 
</div> 
 

 
<button onclick="insert()">insert</button> 
 

 
<div id=Target1><div> 
 
<div id=Target2><div>

источник

2016-12-08 11:19:06 Supersharp

Просто, чтобы добавить в свой список: 6. Вы получить доступ к содержимому шаблона с помощью 'template.content'. Однако я заметил, что вам все равно придется клонировать контент - это не делается автоматически, что и может предложить слово __template__. Спасибо за Ваш ответ. – Manngo

Короче говоря, шаблонный тег является именно то, что это звучит. Это всего лишь шаблон для создания JavaScript в будущем.

Это немного отличается от скрытой <div>, хотя, но в основном вы правы, и это может быть подделано с скрытым div

Представьте себе такой сценарий, в котором у вас есть веб-страница с 2 входами, один, который входит в ваше имя и который входит в ваш возраст. С помощью тега template для создания простой таблицы вы можете использовать JavaScript для заполнения таблицы вашими входами на той же странице.

Эта статья имеет хорошее чтение на нем: https://www.sitepoint.com/html5-template-tag/

источник

2016-06-28 01:33:47 Ctc

Элемент HTML-шаблона: Уточнение

ответ

Смежные вопросы