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页面时，浏览器中只显示了两个图标类型标记，如何解决这个问题，以便在index.html上指定的所有图标类型标记都将呈现。谢谢。

Answer 1

虽然我不确定为什么你没有工作，但我为你的问题找到了解决办法：

图标-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中显示行为不当的元素

1 个答案: