Polymer not reevaluating array-bound expression

Question

I have the following excerpt which should be displayed if there are no elements in an array:

<template is="dom-if" if="[[isEmpty(arrayList)]]">
    <p>some text</p>
</template>

The element has the following methods:

<script>
(function() {
  'use strict';

  Polymer({
    ...

    properties: {
      arrayList: {
        type: Array,
        value: function() {return []}
      }
    },

    ...

    _addElement: function(obj) {
      this.push('arrayList', obj);
    },

    isEmpty: function(obj) {
      return obj.length === 0;
    }

  });
})();
</script>

When I invoke _addElement_, it appears the [[isEmpty(arrayList)]] expression is not evaluated and consequently the text is not displayed.

Am I doing something wrong?

Answer 1

You need to change the expression to [[isEmpty(arrayList.*)]] or [[isEmpty(arrayList.splices)]]. Otherwise, the isEmpty function will only be called if you assign a new array to arrayList, but not when you change its content. You can find more information in the docs.