Hidden attribute in Polymer 1.0

Question

I haven't used Polymer since the 0.4-0.5 era and am used to using the hidden attribute like so <my-element hidden="{{foo != bar}}"></my-element>

Now in Polymer 1.0 I see that have to use computed values from a method for anything that is not straight up a boolean value. I have my code like this:

<my-element hidden="{{_computeHidden()}}"></my-element>

And then in the script section:

Polymer({
    is: 'super-element',
    properties: {...},
    _computeHidden: function(){
         console.log('its being called, mkay');
         return !(foo == bar);
    }
});

Now in the console the message comes up twice after page refresh but when the value of foo changes, the element does not disappear. What am I doing wrong?

Welty

Answer 1

So, there are two issues. As Maria notes, you have to have your _computeHidden method bound to parameters that will respond to Polymer notifications. So, both foo and bar must be declared as properties on the element.

Another issue is that "hidden" is a boolean attribute, meaning that its very presence indicates that the element should be hidden. In Polymer 1.0, using $ in hidden$= changes hidden into a property binding and will handle strings. Without $, hidden= will evaluate just raw boolean. hidden is not on the list for required $ in native html attributes, so the choice is up to you.

Polymer({
    is: 'my-element',
    properties: {
      foo: Boolean,
      bar: Boolean
    },
    _computeHidden: function(){
      return !(this.foo == this.bar);
    }
});

<my-element hidden$="{{_computeHidden(foo, bar)}}"></my-element>

With this annotated attribute binding, "hidden" will appear on the element only if your computed value is truthy, which is the behavior you want. With a simple "=" binding, "hidden" will appear even if your function returns true, or null, or any other value.

Honaker

Huge thanks for "hidden" will appear on the element only if your computed value is truthy I was trying to figure out how to conditionally apply an attribute all afternoon and the docs are apparently wrong. – Thin

Answer 2

If you want to trigger the recalculation of your function when foo changes, you have to ensure that foo is property and pass it into the function as an argument. Here's a small example.

<dom-module id="register-me">
    <template>
        <div hidden$="{{compute(ishidden)}}">Hello from my local DOM</div>
        <button on-click="toggle">Toggle Hidden</button>
    </template>
    <script>
        Polymer({is: "register-me",
            properties: { ishidden: {
                type: Boolean,
                value: false
            } },
            compute: function() {
                console.log("computing...");
                return this.ishidden;
            },
            toggle: function() {
                this.ishidden = !this.ishidden;
            }
        });
    </script>
</dom-module>

Note that to bind to attributes, you should use $=.

Shortbread

Why the move from that simple syntax to this? Definitely seems a lot more cumbersome to me at least. – Welty

I don't know. Some things were changed for performance reasons. As far as expressions are concerned, it is possible that we will get them back some time in the future. I hope we will. – Shortbread

You don't need all of this. I added another answer -- you just need the "$=" part. – Honaker

Conversely, it's also untrue that one should always use $=. Use it only for binding boolean attributes. – Honaker

@EricNguyen I disagree. If you omit the argument to the function, it will only evaluate once. So if you want to reevevaluate it when properties change, you have to pass them as arguments (see docs). – Shortbread

It is also not true that $= is for boolean attributes only. Rather it is for all attribute bindings (as opposed to property bindings). You would also use it for class or href, for example. Again, have a look at the docs – Shortbread

Thanks for the link to the docs. That was clarifying, but the accurate answer is somewhere in between. What you mean to say, I think, is that $= is not just for "boolean attributes" but also anywhere where "native bindings" are required (e.g. "style" and "class"). Here's a more-precise link into the docs. You're also right about the dynamic binding. I'll update my answer to be a clear example for Najm. – Honaker

With your updates, I have no more objections and I upvoted your answer. – Shortbread