CODEWITHSUNDEEP
polymer-1.0
osa
osa

Reputation: 79

Misbehaving element display in Polymer

I want to create a simple element and able to use it in my index.html as follow: 

<!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>

And here is the element:

<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>

When I load the index.html page, only of the two icon-type tag got displayed on the browser and how can I fix this, so that all the icon-type tags specified on the index.html will be render. Thank you.

Upvotes: 0

Views: 38

Answers (1)

Adi
Adi

Reputation: 6374

Though I am not sure why your did not work but I made a workaround for your problem:

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>

No changes to index.html. In this new code I made a new property called icontype and set it equal to the actual icon id.

Upvotes: 1

Related Questions