Marcin Kurpiel Marcin Kurpiel - 23 days ago 19
Javascript Question

Polymer computed function refresh value

Hi I have question related with refreshing output of function which is used as binded to an attribute.

Lets say I have part of html that I want to hide in specific cases:

<div hidden$="[[hideElement()]]">


function is defined is Polymer object:

hideElement: function () {
if (this.deviceId == undefined) {
return false;
}
else if (typeof this.deviceId === 'string' || this.deviceId instanceof String) {
return true;
}
else {
return false;
}
},


What I see is that element is not hiding after output of this function is changing.

I probably miss something but I am not sure what.

Answer

This is answered in the Polymer Data binding documentation.

The computed binding declaration includes a computing function name, followed by a list of dependencies, in parenthesis.

Your issue is that the computed function is called once but it has no way of knowing in the future when the function value will change since you provide it no arguments. You need to include a property as a dependency so it knows when your function value may change.

For example:

 <div hidden$="[[hideElement(deviceId)]]"></div>

Thus you need to declare a property

Polymer({
    is: 'my-element',

    properties: {
        deviceId: String
    },

    hideElement: function(deviceId) {
        return deviceId ? true : false;
    }
})

If you look at other polymer elements they typically call the function _isHidden as opposed to hideElement to indicate that it will take a True/False value.

Since we have declared deviceId as a string this will significantly simplify your hideElement function. "", null, and undefined all evaluate as false.

Comments