HTML-шаблон (пользовательский) тег - PullRequest
Новая
       14

HTML-шаблон (пользовательский) тег

0 голосов
/ 01 марта 2012

Я понимаю, что использование пользовательских тегов html нецелесообразно по ряду причин, но я хотел, чтобы вы выполнили конкретную ситуацию, в которой может потребоваться собственный тег html, и, надеюсь, вам сообщат иначе или, возможно, лучший способ достижения моей цели.

Во всем моем коде у меня есть то, что я называю шаблонами, которые состоят из тега div с шаблоном и прикрепленным к нему скрытым классом. Это не видно на экране, но в основном эти «шаблонные» теги содержат HTML, который я использую в Javascript для создания различных элементов. Я делаю это так, чтобы я мог стилизовать свои шаблоны в html, а не беспокоиться о смешивании CSS с моим Javascript. 

<!-- TEMPLATE -->
<div class="template hidden">
    <span>Random Container</span>
    <a href="#">Random Button</a>
</div>

В JavaScript я бы сделал что-то вроде 

var template = document.getElementById("template");
var clone = template.cloneNode(true);
clone.removeClass("template hidden");

Я бы предпочел сделать что-то подобное 

<template class="hidden">
   <span>Random Container</span>
   <a href="#">Random Button</a> 
</template>

Так что, если у меня есть несколько шаблонов в одном div, я могу получить их все вместо того, чтобы давать им уникальные имена классов. Конечно, мои соображения о необходимости реализации намного глубже, чем это, но нет необходимости тратить свое время на детали. Скажем так, это поможет очистить мой Javascript ALOT.

Поскольку пользовательский тег шаблона скрыт и действительно является не чем иным, как контейнером, который удобно вызывать внутри javascript с document.getElementsByTagName ("template"); Это нормально делать? Вероятно, я бы поставил перед тегом собственное имя, если шаблон когда-нибудь будет реализован в html.

Ответы [ 2 ]

2 голосов
/ 01 марта 2012

Современные браузеры обычно «поддерживают» пользовательские теги в смысле их синтаксического анализа и конструирования DOM-узлов, так что элементы могут быть стилизованы и обработаны в сценариях.

Основной проблемой является IE до IE 9, но он может быть обработан с помощью document.createElement('...') один раз для каждого имени пользовательского тега.

Другая проблема заключается в том, что валидаторы будут сообщать о тегах как об ошибках, и если таких ошибок много, вы можете не заметить некоторые реальные ошибки в разметке. В принципе, вы можете создать свой собственный DTD, чтобы справиться с этим (у меня есть генератор DTD в HTML, но он сложнее, чем я ожидал ...).

С этими оговорками используйте пользовательские теги, если они существенно упрощают вашу работу по сравнению с использованием классов.

1 голос
/ 01 марта 2012

Почему бы не использовать один из атрибутов данных HTML5 ?Они предназначены для хранения личных данных или пользовательской информации.

Для вашего случая вы можете добавить data-type="template" или data-name="template", а затем искать и удалять на основе этого.Одна простая функция, которую вы напишите, чтобы удалить тег <template>, но без нарушения правил.

Итак, используя ваш пример, <div data-type="template" class="hidden"></div>

...