Тег шаблона html5: запасной вариант для доступа к содержимому

Я использую тег шаблона в браузере webkit (JavaFX WebView 2.2) для хранения элементов, которые я могу клонировать и добавлять в основную часть документа.

Однако я не могу получить доступ к его содержимому с помощью templateElement.content (стандарт HTML5). Вместо этого я использую jQuery для получения элементов внутри TAG шаблона с помощью селектора "#templateElement div".

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

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

Каков рекомендуемый способ получения содержимого шаблона независимо от будущих изменений реализации?

HTML:

<template id="templateElement">
    <div>Clone Me!</div>
</template>

JavaScript:

function getContentsCurrent() {
    var toBeCloned = $("#templateElement div")[0];
    //append where needed...
}

function getContentsFuture() {
    var toBeCloned = templateElement.content.getElementsByTagName("div")[0];
    //append where needed...
}

ИЗМЕНИТЬ

Я думаю, что jQuery не сможет обрабатывать это автоматически, даже в будущем, потому что шаблон "innerHTML" намеренно направляется в content, чтобы он стал недоступным для DOM (поэтому ни один селектор не касается его случайно).


html fallback javafx-webengine html5-template
person Eduardo Poço    schedule 05.03.2016    source источник
comment
Эдуардо, ты можешь создать скрипку, чтобы воспроизвести проблему? Я бы с радостью помог, но мне лень делать это с нуля :)   -  person Lajos Arpad    schedule 05.03.2016
comment
Ну, проблема еще не возникла. Я могу получить div внутри шаблона с помощью getContentsCurrent(). Но в будущих выпусках JavaFX, когда шаблон будет реализован в соответствии со спецификацией HTML5, код может сломаться, так как я думаю, что innerHTML шаблонов будет доступен только с использованием свойства содержимого элемента шаблона. Затем необходимо будет использовать getContentsFuture(). Можно ли понизить версию браузера в скрипте, чтобы проверить резервные варианты?   -  person Eduardo Poço    schedule 05.03.2016
comment
Эдуардо, вы пытаетесь решить проблему, которой еще не существует. Я считаю, что лучше подготовиться к проблеме: сделать данную вещь как можно более атомарной, чтобы, если проблема действительно возникнет в будущем, вы могли ее изменить. А пока подпишитесь на рассылку новостей, чтобы узнать о характере изменений заранее, если это возможно ;)   -  person Lajos Arpad    schedule 05.03.2016
comment
Да, я хочу решить это до того, как это произойдет. Меняться после возникновения проблемы несложно, но это может случиться, когда я слишком занят. Для пользователей было бы плохо иметь внезапный перерыв на странице, пусть даже на несколько дней. Мне нужен был код, способный работать в обоих направлениях, сейчас и в будущем. Выбранный ответ заставил меня подумать об общих решениях для откатов, и они кажутся проще, чем я думал, прежде чем задавать вопрос!   -  person Eduardo Poço    schedule 05.03.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете проверить, существует ли функция content раньше:

function getContents() {
  var toBeCloned;
  if ( templateElement.content )
    toBeCloned = templateElement.content.getElementsByTagName("div")[0];
  else
    toBeCloned = templateElement.querySelector("div");
  //append where needed...
}

Другой путь:

var content = templateElement.content || templateElement
var toBeCloned = content.querySelector( "div" )
//...
person Supersharp    schedule 05.03.2016
comment
Действительно, это общее запасное решение. Приятно узнать так много других вещей, задавая вопросы о SO! - person Eduardo Poço; 05.03.2016