Polymer 1.0 значок по умолчанию, установленный в железе-иконы, не работающий с использованием пламени (метеор) templating engine

После обновления до Polymer 1.0, набор утюгов по умолчанию не работает. Я пытаюсь использовать значок дома из набора значков по умолчанию.

фрагмент кода HTML:

    <link rel="import" href="/components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="/components/iron-icons/iron-icons.html">
    <link rel="import" href="/components/iron-icons/communication-icons.html">
    <link rel="import" href="/components/iron-form/iron-form.html">
    <link rel="import" href="/components/iron-selector/iron-selector.html">
    <link rel="import" href="/components/iron-pages/iron-pages.html">

    <!-- OOTB paper elements -->
    <link rel="import" href="/components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="/components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="/components/paper-toolbar/paper-toolbar.html">

    <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="/components/paper-material/paper-material.html">

    <link rel="import" href="/components/paper-menu/paper-menu.html">
    <link rel="import" href="/components/paper-item/all-imports.html">

    <link rel="import" href="/components/paper-tabs/paper-tab.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs-icons.html">

<paper-icon-item id="socialFeed">

        <iron-icon icon="home" item-icon></iron-icon>

        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>

</paper-icon-item>

Я получаю предупреждение в отладчике Chrome: [iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset? @line # 167 в iron-icon.html

Отладка показала, что в строке 163 в файле iron-icon.html

this._iconset = this.$.meta.byKey(this._iconsetName);

this._iconsetName имеет значки "значки", но this._iconset - undefined.

Я пропустил какой-то импорт или что-то здесь?

EDIT Эта проблема возникает только при использовании механизма шаблонов Blaze в Meteor. Просто хотел добавить этот бит для полной картины.

Ответы

Ответ 1

Получено настоящее решение (не обходное), поэтому открыл новый ответ.

Причиной предупреждения в отладчике Chrome является неправильное время загрузки импорта ссылок в правильной последовательности.

Решение:

1.) Удалите импорт ссылок в iron-icons (и, если необходимо, другие наборы значков, например карты, социальные и т.д.):

  • общественности
    • bower_components
      • железо-иконка
        • железо-icons.html
        • maps-icons.html(необязательно, если вы их используете)
        • social-icons.html(необязательно, если вы их используете)

железо-icons.html:

перед:

<[email protected] Iron Elements
@element iron-icons
@demo demo/index.html
-->
<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>

<iron-iconset-svg name="icons" size="24">
    <svg><defs>
    <g id="3d-rotation"><path d="M7.52 21.48C ..... etc ..... /></g>
    </defs></svg>
</iron-iconset-svg>

после

<[email protected] Iron Elements
@element iron-icons
@demo demo/index.html
-->
<!--<link rel='import' href='../iron-icon/iron-icon.html'>
<link rel='import' href='../iron-iconset-svg/iron-iconset-svg.html'>-->

<iron-iconset-svg name="icons" size="24">
    <svg><defs>
    <g id="3d-rotation"><path d="M7.52 21.48C ..... etc ..... /></g>
    </defs></svg>
</iron-iconset-svg>

Исходные ссылки-импорт (зависимости) блокируются (не загружаются async, а синхронизация, что хорошо, потому что так оно и должно быть). Однако в коде <link rel='import' href='../iron-icon/iron-icon.html'> iron-icon ссылается на набор значков, который еще не мог загрузиться (<iron-iconset-svg name="icons" size="24"> и т.д.), Поскольку он возникает после первоначального импорта ссылок (из-за блокировки характера импорта ссылок). Следовательно, в строке 164 он не может найти значок значков по умолчанию и, следовательно, бросает знаменитое предупреждение в строке 167:

не удалось найти значки иконок, вы импортировали набор значков?

2.) Загрузите требуемые зависимости в файле проекта в правильной последовательности:

<head>
  <meta charset="utf-8" />
  <title></title>

  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="/bower_components/polymer/polymer.html">

  <link rel="import" href="/bower_components/iron-meta/iron-meta.html">
  <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="/bower_components/iron-iconset-svg/iron-iconset-svg.html">
  <link rel="import" href="/bower_components/iron-iconset/iron-iconset.html">

  <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="/bower_components/iron-icons/maps-icons.html">
  <link rel="import" href="/bower_components/iron-icons/social-icons.html">

  <link rel="import" href="/bower_components/iron-icon/iron-icon.html">
</head>

Теперь <link rel="import" href="/bower_components/iron-icon/iron-icon.html"> загружается в последнюю позицию, поэтому все зависимости доступны в этой точке.

Теперь для меня это как шарм.

@LuckyRay: Пожалуйста, сообщите нам, подходит ли это для вас. Я опубликую это в вашем комментарии github для Полимерной команды.

Ответ 2

У меня была такая же проблема. Кажется, связано с <paper-icon-item>. Попытайтесь заменить его <paper-icon-button> тем временем (я быстро воспроизвел ваш код, и это сработало для меня: по крайней мере, ваш домашний значок отображается правильно). Возможно, у кого-то еще есть другой комментарий по этой проблеме.

Следовательно, ваш HTML:

<paper-icon-button icon="home" id="socialFeed">
  <paper-icon-item>
        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>
  </paper-icon-item>
</paper-icon-button>

<paper-item-body two-line> не отображается внутри кнопки, хотя (или, может быть, попробуйте кнопку стилизации → увеличить и т.д.) и немного поиграть. Надеюсь, что это помогает в любом случае в качестве быстрого обхода.

Тем не менее, породы Polymer 1.0. Спасибо за усилия... Хорошая работа от Полимерной команды, спасибо. Удачи нам....: -)

Просто попробовал это наоборот, поместив иконку в <paper-icon-time>:

<paper-icon-item>
  <paper-icon-button icon="home" id="socialFeed"></paper-icon-button> 
  <paper-item-body two-line>
    <div>Social Feed</div>
    <div secondary>2 Unread FB Posts</div>
  </paper-item-body>
</paper-icon-item>