Совместное поведение между лениво загруженными частями приложения

Как демонстрирует Polymer Starter Kit или Polymer Shop, мы используем ленивую загрузку в нашем приложении Polymer. Это означает, что у нас есть макет на основе ящика, а оболочка приложения импортирует содержимое ящика, а также содержимое главной страницы.

Теперь мы вводим поведение и используем его в пользовательских элементах A и B, где A отображается в блоке, а B - на главной странице. Теперь мы получаем предупреждение браузера (Chrome), что flattenBehaviorsList не мог найти поведение.

Мы предполагаем, что это происходит потому, что Polymer.importHref вызов (опция asyncявляется true) для главной страницы распознает поведение (в пользовательском элементе B) и добавляет его импорт на карту импорта HTML. Но прежде чем контент будет импортирован, Polymer.importHref (опция asyncявляется true) вызов для ящика хочет импортировать поведение для пользовательского элемента A и берет содержимое с карты импорта HTML. Но так как импорт не выполнен, поведение null,

Это предположение верно? И если да, то это ошибка в Chrome - просто идея, поскольку кажется, что Firefox справляется с этим? Или это плохой дизайн, и мы не должны вести себя одинаково в разных лениво загруженных частях приложения?

Как вы думаете?

заранее спасибо

Источник

2 ответа

Решение

Ленивая загрузка - это предпочтительный способ загрузки ресурсов, который вам не нужен сразу. Но вы должны сделать это правильно, что я объясню чуть позже.

Поведение в отдельном файле и его повторное использование в нескольких пользовательских элементах также очень нормально и даже приветствуется. Однако все ресурсы, которые нужны пользовательскому компоненту, должны быть загружены как обычно. rel="import" означает async а также defer флаги не должны быть установлены.

Например, взгляните на следующий демонстрационный элемент, взятый из страниц разработчика Polymer:

<link rel="import" href="highlight-behavior.html">

<script>
  Polymer({
    is: 'my-element',
    behaviors: [HighlightBehavior]
  });
</script>

Как видите, поведение импортируется как зависимость. Без этого, скорее всего, будет ошибка, как в вашем случае.

Теперь самое интересное - ленивая загрузка. Здесь вы фактически не загружаете все, что использует компонент. Таким образом, вы должны хорошо знать, какие ресурсы вы можете, а какие не можете лениво загружать. Как правило, вы должны загружать все, что вы используете / создаете непосредственно внутри компонента.

Некоторые распространенные примеры отложенной загрузки:

  • Если у вас есть iron-pages element и все страницы являются пользовательскими элементами, тогда вам следует загружать только первую (по умолчанию) страницу по умолчанию, так как другие не будут использоваться сразу.
  • Вы можете поместить не существенные элементы GUI, такие как выдвижные боковые панели внутри dom-if и сделать это dom-if после того, как все компоненты лениво загружены. Самый простой способ для этого - использовать importHref.

Очень хороший пример для отложенной загрузки элементов - приложение Polymer's Shop: исходный код, онлайн-демонстрация.

Подводя итог: не ленивая загрузка обязательных зависимостей для пользовательского элемента, а ленивая загрузка самого элемента.

Источник

Я думаю, что у меня была такая же проблема сегодня. При использовании importHref async я получаю такие ошибки, как [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import, но когда я изменяю на async = false, сообщения об ошибках исчезают.

Похоже, что это известная ошибка Polymer или Chrome https://github.com/Polymer/polymer/issues/2522

Источник
Другие вопросы по тегам