自定义函数中的聚合物未定义属性

Question

I use Polymer (v1.0) and I want to create a simple element which can show me some extra content depending on a property and it has to work with multiple values - aka simple " switch ".

I wrote this code.

...
    <span>{{for}}</span>
    <template is="dom-if" if="{{checkFor('alfa')}}">
        hi !!!
    </template>
</template>

<script>
    Polymer({
        is: "...",

        properties: {
            for: String,
            user: String,
            manager: {
                type: Boolean,
                notify: true
            }
        },

        attached: function() {
            this.textContent = 'Hello World, my user is ' + (this.user || 'nobody') + '.\n' +
                    'This user is ' + (this.manager ? '' : 'not') + ' a manager and he likes ' + this.for + '.';
        },


        checkFor: function (aaa) {
            // return aaa === this.for;

            this.textContent = 'Hello World, my user is ' + (this.user || 'nobody') + '.\n' +
                    'This user is ' + (this.manager ? '' : 'not') + ' a manager and he likes ' + this.for + '.';
        }
    });
</script>

My function checkFor is used to check if a value I want to have (for example 'alfa') is equal with element property/attribute for .

But it doesn't worked at all so I tried to check values using console.log(). After than I discovered variable aaa contains 'alfa' and variable this.for contains undefined .

Then I copied some output code I found which use element properties and it also did not work. If I run the same code in attached function it works fine.

How can I use element properties in custom functions?

Answer 1

The first time your checkFor function is called, this.for has not been defined yet. You can pass in for as a parameter to the function, as described in the documentation .

<template is="dom-if" if="{{checkFor('alfa', for)}}">