Computed property isn't recomputed when array dependency is mutated

Question

I'm using a computed property as the items for a dom-repeat.

<template is="dom-repeat" items="{{double(values)}}">
  <span>{{item}}</span>
</template>

When its dependency values changes, the property isn't recomputed.

addValue: function() {
  this.push('values', this.values.length+1);
  this.async(this.addValue, 1000);
},

If, instead of mutating values, I set it to a new array, it does work:

this.set('values', this.values.concat(this.values.length+1))

Is this a bug or expected behavior?

Demo: http://plnkr.co/edit/SmAHKMHhSPWgmBhBBzAv?p=preview

Answer 1

I spoke with Scott Miles, a member of the team behind Polymer, and I got this back:

In order for the computed property to bind properly, you must use [[double(values.*)]].

The parameter passed to your double function will be an object with properties path, value, and base, just as in path observation.

• path will refer to a path string that specifies if length or splices was updated in the array,
• value will be the value of length or splices, and
• base will refer to your array.

Example:

<template is="dom-repeat" items="[[double(values.*)]]">
  <span>[[item]]</span>
</template>

<script>
  ...
  double: function(e) {
    return e.base.map(function(n) { return n*2; });
  }

Docs: https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-observation

Demo: http://plnkr.co/edit/Idrz5XvLn9SZ35iR8pGT?p=preview

A dom-repeat template expects to be working with a collection, and thus when you bind it to values directly, it knows to keep tabs on the items in values.

Computed properties do not have any such expectations, and so [[double(values)]] doesn't work in this case because it will only update when the values reference itself changes, not when the items in the array change. Using values.* lets Polymer know that it should update the computed property binding when the array's contents are mutated.

---

I wouldn't post this here in Scott's stead if not for

sjmiles: @vartan: otoh, if you could transcribe what you learned, it would help me, time is my least elastic resource