[SOLVED] polymer dom-if does not re check the condition

polymer dom-if does not re check the condition

I have a simple dom-if in a template:

<div>
        <template is="dom-if" if="{{checkListEmpty()}}" restamp>
                <paper-button raised class="init" on-tap="initialize">Initialize</paper-button>
        </template>
</div>

and a function to show or hide.

checkListEmpty() {
    return this.todos.length == 0;
}

It works for the first time only. If the this.todos.length becomes 1 then the template does not goes away. How can i hide when the condition is false.

Solution

There is no binding working for your function because there is no property to bind. To make it work you should add a property in parameter : checkListEmpty(foo). Like that, everytime the property foo change the function will be executed. However an array as property won't work if the content of this one changed (content pushed) except if this is the global array property that is replaced :

var bar = [], foo = ["ggg"];
bar = foo;

In that case the function will be called, but it's not great.

Anyway for your question you can use an hidden property for the paper-button or bind the DOM-IF with the table length.

<template is="dom-if" if="[[!bar.length]]" restamp>
  <paper-button raised on-tap="addBar">Initialize</paper-button>
</template>

<paper-button raised on-tap="addBar" hidden="[[bar.length]]">Initialize</paper-button>

And then everytime a property is added into the array or removed until there is nothing in it your button will be displayed or not.

You can see a working jsfiddle (use chrome though and be patient for the initialization.. comment here if it's not working)