Have computed binding fire when array sub property changes? - polymer

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>