Have computed binding fire when array sub property changes?

Question

Polymer 1.*

I am trying to refine the behavior of my computed binding with a array. I had <div hidden$="[[getState(uploadState.*)]]">FOO</div> but it was firing off to often.

I refined it to uploadState.value:

  <template is="dom-repeat"
    initial-count="1"
    index-as="index"
    items="{{uploadState}}">

    <div hidden$="[[getState(uploadState.value)]]">FOO</div>

With:

    uploadState: {
      type: Array,
      value: function() {
        var arr = Array.apply(null, Array(5));
        var newArray = arr.map(()=> {
          return {
            value: false,
            main: false,
            edited: false,
            loading: false
          };
        });
        return newArray;
      },
      notify: true
    },

  attached: function() {
    setTimeout(()=>  this.set(`uploadState.0.value`, true), 1000)
  }

but it does not fire off at all. How can I make it fire in the computed binding when the value property changes?

Also, how can I use this.get() to get the value when it changes? I tried var uploaded = this.get(['uploadState.value', 0]) in the computed binding getState but it just shows undefined(when it used to fire with the .*)

Answer 1

The problem with your usage of the binding uploadState.value is it doesn't exist. You are making an array of uploadState that have a member with the property value which looks more like uploadState.*.value but you don't really want to change on all the changes of value, just the one in question so you can take advantage of the item binding of dom-repeat so that your code would come out like so:

<template is="dom-repeat"
  initial-count="1"
  index-as="index"
  items="{{uploadState}}">
    <div hidden$="[[item.value]]">FOO</div>
</template>

I might suggest you change up your naming convention and use uploadStates being it's an array and all, so that you can do:

<template is="dom-repeat"
  initial-count="1"
  index-as="index"
  items="{{uploadStates}}"
  as="uploadState">
    <div hidden$="[[uploadState.value]]">FOO</div>
</template>