Polymer 1.0: Binding css classes does not update

Question

I have something like this:

<dom-module id="bar-foo">
    <template>
        <span class$="{{getState()}}">Bar Foo</span>
    </template>
    <script>
    (function() {
        class BarFoo {
            beforeRegister() {
                this.is = 'bar-foo';
                this.properties = {
                    data: {
                        type: Object,
                        notify: true,
                        observer: '_updateData'
                };
            }
            getState() {
                if (this.data) {
                    return this.data.val > 0 ? 'positive' : 'negative';
                }
            }

        }
        Polymer(BarFoo);
    })();
    </script>
</dom-module>

Now, the getState function is only called once, but the data property is updated every second. Is it possible to update the class$ property when the data changes ?

Answer 1

If you want the getState function to be evaluated every time data.val changes, you can pass it as an argument to the function.

<span class$="{{getState(data.val)}}">Bar Foo</span>

Have a look at the docs for more information on computed bindings.