Динамически импортировать HTML-шаблон в Dart Polymer

Я динамически создаю полимерный компонент с дротиком и добавляю в dom.Динамически импортировать HTML-шаблон в Dart Polymer

Но теперь я хотел бы это сделать БЕЗ, чтобы статически импортировать шаблон HTML во время компиляции.

В моем случае использования у меня есть контейнер div с идентификатором myContainer и пользовательский компонент полимерного дротика, чей тег my-tag.

Я tryied с:

LinkElement e = new LinkElement('link'); 
e.rel = 'import'; 
e.href= 'my-tag.html'; 
document.head.children.add(e); 

$['myContainer'].children.add(new Element.tag('my-tag'));

Но это заканчивается тем, что, за исключением следующего:

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. 
...

Заметим, что исключение Raisen когда полимерный элемент добавляется в йот и не при добавлении тега ссылки. Также тот же код работает, если добавить ссылку во время компиляции и комментировать код, который добавляет его во время выполнения.

Я пробовал также с несколькими различными вариантами кода выше, в основном добавляя тег ссылки в отдельный метод, называемый до polymerInit или внутри polymerInit().run(...), но ничего не меняется.

Мне интересно, поддерживается ли этот вариант использования.

источник

2014-09-18 Vittorio Ballestra

Почему вы не хотите добавлять импорт статически? Я думаю, что Полимерные трансформаторы нуждаются в них, когда вы строите проект. –

Потому что я хотел бы создать библиотеку компонентов, которые отображаются в области содержимого с помощью рамки навигации, когда пользователь нажимает на нее. Мне уже нужно импортировать каждый компонент со стороны дротика «навигатора», но это не так уж плохо, поскольку мне нужно зарегистрировать «маршруты». Но я пытаюсь найти способ не включать HTML-шаблоны тоже на стороне HTML и минимизировать работу, которую нужно сделать, чтобы добавить новую «страницу». –

Вы можете создать трансформатор. –

Попробуйте добавить HeadElement:

LinkElement e = new LinkElement(); 
e.rel = 'import'; 
e.href= 'my-tag.html'; 
HeadElement h = new HeadElement(); 
h.children.add(e); 
document.head.children.add(h);

источник

2014-09-19 08:35:53 JoaoBiriba

Вам действительно нужен 'HeadElement'? Я ожидал, что вы можете сделать document.head.append (новый LinkElement() .. rel = 'import' .. href = 'my-tag.html'); '. Это также работает при построении JavaScript? –

@JoaoBiriba Я попробую, но я уже могу сказать вам этот факт: даже без (повторного) добавления элемента head (который уже присутствует в документе), проверяя dom с помощью chrome, я замечаю, что элемент ссылки фактически добавлен , и исключение запускается только тогда, когда я пытаюсь добавить компонент в dom, а не при добавлении тега ссылки. С другой стороны, если я добавлю тег ссылки «вручную», он будет работать. –

Построенный в js дает тот же результат, однако вы решили сделать чище, не уверен, действительно ли ему нужен HeadElement. – JoaoBiriba

Можно было бы создать трансформатор, который делает это. Трансформатор выполнен с использованием паба и паба, и может анализировать и изменять код во время процесса сборки. dartlang.org/tools/pub/assets-and-transformers.html, dartlang.org/tools/pub/transformers

или

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

источник

2014-09-19 09:18:31

Создание одного файла html, который импортирует все остальные, не работает. Но трансформаторный способ звучит интересно, я буду исследовать. –

Я думаю, что это то, что элементы ядра и элементы бумаги Дарта видят, например, https://github.com/dart-lang/core-elements/blob/master/lib/core_animated_pages.html –

mmh. не уверен, что импорт для core_selector в этом случае нужен (он повторяется в частной реализации), другой импорт используется в этом шаблоне (infact это шаблон), это не похоже на экспорт для использования в другом файле. –

Динамически импортировать HTML-шаблон в Dart Polymer

ответ

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