Polymer 中的异常元素显示

Question

我想创建一个简单的元素并能够在我的 index.html 中使用它，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

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

    <body unresolved>
        <icon-type filetype="asd"></icon-type>
        <icon-type filetype="DIR"></icon-type>
    </body>
</html>

这是元素：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/editor-icons.html">

<dom-module id="icon-type">
    <template>

        <iron-icon class="foo" id="foo" icon="{{filetype}}"></iron-icon>

    </template>
    <script>
        Polymer({
            is: 'icon-type',

            properties: {
                filetype : {
                   type: String,
                   notify: true,
                   observer: '_loadIcon'
               }
            },

            _loadIcon: function(){
                if (this.filetype == "DIR") {
                    document.querySelector("#foo").icon = "icons:folder";
                } else {
                    document.querySelector("#foo").icon = "editor:insert-drive-file";
                }
            }
        });
    </script>

</dom-module>

当我加载 index.html 页面时，只有两个图标类型标签显示在浏览器上，我该如何解决这个问题，以便 [=18] 上指定的所有图标类型标签=] 将被渲染。谢谢。

Answer 1

虽然我不确定你为什么不工作，但我为你的问题做了一个解决方法：

icon-type.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/editor-icons.html">

<dom-module id="icon-type">
    <template>

        <iron-icon class="foo" id="foo" icon="{{icontype}}"></iron-icon>

    </template>
    <script>
        Polymer({
            is: 'icon-type',

            properties: {
                filetype : {
                   type: String,
                   notify: true,
                   observer: '_loadIcon'
               }
            },

            _loadIcon: function(){
                if (this.filetype == "DIR") {
                    this.$.foo.icon = "icons:folder";
                } else {
                    this.$.foo.icon = "editor:insert-drive-file";
                }
            }
        });
    </script>

</dom-module>

index.html 没有变化。在这个新代码中，我创建了一个名为 icontype 的新属性并将其设置为等于实际图标 ID。

Polymer 中的异常元素显示

Misbehaving element display in Polymer

polymer-1.0