使用 blaze (meteor) 模板引擎在 Iron-icons 中设置的 Polymer 1.0 默认图标不工作
Posted
技术标签:
【中文标题】使用 blaze (meteor) 模板引擎在 Iron-icons 中设置的 Polymer 1.0 默认图标不工作【英文标题】：Polymer 1.0 default icon set in iron-icons not working using blaze (meteor) templating engine 【发布时间】：2015-08-16 23:03:17 【问题描述】：升级到 Polymer 1.0 后，默认的 iron-icons 设置不起作用。我正在尝试使用默认图标集中的主页图标。
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 in iron-icon.html
调试显示 Iron-icon.html 的第 163 行是
this._iconset = this.$.meta.byKey(this._iconsetName);
this._iconsetName 的值为“icons”，但 this._iconset 未定义。
我在这里错过了一些导入或其他东西吗？
编辑只有在 Meteor 中使用 Blaze 模板引擎时才会出现此问题。只是想为完整的图片添加这一点。
【问题讨论】：
【参考方案1】：有一种强制使用影子 DOM 的实验性方法。检查底部的这个论坛帖子： https://forums.meteor.com/t/polymer-1-0-and-iron-router-or-flow-router/5148/16
【讨论】：
感谢@Mattijs 提及论坛！我自己确实一直在关注该线程:) 这是另一个 github 存储库，其中“Blaze 和空格键正在被 Polymer 替换”@github.com/synka/meteor-polymer。但是，我自己还没有尝试过。 我将等待修复首先出现，我停止将我的 0.5 项目迁移到 1.0。对于很多问题，它正在延迟开发。 很遗憾，您确实是对的！ 1.0的问题太多了。我也在等待修复，而不是在核心 Polymer 周围闲逛【参考方案2】：现在得到了真正的解决方案（不是解决方法），因此打开了新的答案。
Chrome 调试器中出现警告的原因是由于按正确顺序加载链接导入的时间错误。
解决方案：
1.) 删除铁图标中的链接导入（如果需要，还可以删除其他图标集，如地图、社交等...）：
公开 bower_components 铁图标 铁图标.html maps-icons.html（可选，如果您正在使用它们） social-icons.html（可选，如果您正在使用它们）铁图标.html：
之前：
<!--@group 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>
之后：
<!--@group 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>
最初的链接导入（依赖项）是阻塞的（不是加载异步而是同步，这很好，因为它应该是这样的）。
但是，在<link rel='import' href='../iron-icon/iron-icon.html'> iron-icon 的代码中引用了尚未加载的图标集（<iron-iconset-svg name="icons" size="24"> 等...），因为它出现在初始链接导入之后（由于链接导入的阻塞性质）。因此，在第 164 行它找不到默认图标集 icons，因此在第 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 评论上为 Polymer 团队发布这个。
【讨论】：
感谢@Juergen Fink！我必须说你确实解决了这个问题。请将您的发现作为 cmets 发布在 github 中提出的问题中。不过我想补充一点，这个问题只存在于 Chrome 而不是 Firefox。 @LuckyRay 感谢您的反馈。是的，你是对的。在 Firefox 中运行良好。也许是因为 Chrome 本身就包含了聚合物，因此可能是加载依赖项的时间问题。我在 github 上发布了问题，感谢您在评论中提供的链接 - 帮助很大。 @LuckyRay 在 github 上看到了你的确认 - 你很快。感谢并再次感谢您在 Stack Overflow 和 Github 上提出这个问题 - 做得好 LuckyRay's。这个问题很重要，因为它阻止了我的整个应用程序正确加载。现在像婴儿一样顺利加载（这就是为什么我努力寻找真正的原因 - 3天的摆弄......呵呵呵呵）。 伙计们，很抱歉成为派对的大便者，...但是更换库存聚合物元件对我来说似乎不是一个合适的解决方案。我不想编辑那些，只有我自己构建的那些。不过，我很高兴这个问题得到更多关注！ @Mattijs 我们 100% 同意您的意见。让我们希望 Polymer 团队将在下一次更新中实现该问题的内部解决方案（正如我们现在所知，这与脚本执行时图标的可用性有关）。与此同时，我们必须以某种方式解决问题才能继续我们的项目。【参考方案3】：我有同样的问题。似乎与<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>
【讨论】：
刚刚尝试过相反的方法：<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>
感谢您的解决方法@Juergen Fink。作为一种解决方法，我一直在使用以下代码：<paper-item> <paper-icon-button icon="home" id="socialFeed" icon-item></paper-icon-button> <paper-item-body two-line> <div>Social Feed</div> <div secondary>2 Unread FB Posts</div> </paper-item-body> </paper-item> 也很好地环绕。将等着看其他人有什么评论。以上是关于使用 blaze (meteor) 模板引擎在 Iron-icons 中设置的 Polymer 1.0 默认图标不工作的主要内容，如果未能解决你的问题，请参考以下文章
使用 Meteor 和 blaze 在掌上电脑上正确加载数据
使用 Blaze 和空格键访问 Meteor 应用程序中的嵌套对象