CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0web-component
lucasumberto
lucasumberto

Reputation: 134

Why this polymer not starting with default attributes?

I'm developing my first polymer watching video tutorials. I want to start the polymer with default attributes, but the attribute keeps starting as undefined... why this is happening?

my polymer:

<!-- referencia do polymer -->
<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="x-slider">

    <style>

        #imagens{
            color: blue;
        }

    </style>

    <template>
        <center>
            <div id="container">
                <div id="imagens">
                    Render imgs from src here!
                </div>
                <div id="Buttons">
                    <button name="voltar" id="botaoVoltar" on-click="botaoVoltar" ><<</button>
                    <button name="pausar" id="botaoPausar" >||</button>
                    <button name="avancar" id="botaoAvancar" >>></button>
                </div>
            </div>
        </center>
    </template>

</dom-module>

<script>
        Polymer({
            is: 'x-slider',
            properies: {
                controlVisible: {
                    type: Boolean,
                    value: false
                },
                interval: {
                    type: Number,
                    value: 0
                },
                imageFolder: {
                    type: String,
                    value: ''
                }
            },
            listeners: {
                '#botaoVoltar click': 'botaoVoltar'
            },
            botaoVoltar: function () {
                console.log('clicked');
            },
            ready: function () {
                console.log(this.controlVisible);
                this.$.botaoVoltar.hidden = !this.controlVisible;
            }
        })
</script>

i want it to start with controlVisible as false, as you can see at the properties, but the console.log in the ready function always returns undefined. and it isn't receiving the value from index.html when i do:

<x-slider controlVisible=true ></x-slider>

what is wrong? the full project is at git: https://github.com/lucasumberto/slider

Upvotes: 1

Views: 74

Answers (1)

a1626
a1626

Reputation: 2964

You have written properties as properies letter 't' is missing. Also to pass from element attribute you'll have to write it as control-visible capital letters gets converted to '-' + small cased letter. Also for boolean you don't need to write true. Writing the property name makes it true. And last thing prefer to keep style tag inside the template

Upvotes: 2

Related Questions