聚合物1.0 - 更改属性值未在Dom重复中更新

Question

I have a dom-repeat element, and when this is rendered it only has a name property filled out, and the price will be populated by an ajax reponse:

<template is="dom-repeat" id="myId" items="{{arr}}">
       <div>[[item.name]]</div>
       <div>[[item.price]]</div>
</template>

The problem is that the price isn't rendered after the response is gathered.

I tried:

document.querySelector('#myId').render();

After the response has been received, but doesn't work.

EDIT:

I can do this.set('arr.x.price', value) where x is the index of my object in the array, but my context is inside a function that does not know the index unless I calculate it, which isn't hard, but surely there must be a better way?

Answer 1

Array update approaches

1. either use this.set to update the array values. Ref: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#array-binding
2. or After updating all the array values you can do this.notifyPath('arr',this.arr) . Ref: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#set-path

If you use approach 1. Then you can have observe property to listen for changes to a sub fields. Ref: https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists

<template is="dom-repeat" id="myId" items="{{arr}}" observe="price">

If you use approach 2, then the dom-repeat should refresh automatically after array update.

If it still does not work, then use the render() method to force render of content. Ref: https://www.polymer-project.org/1.0/api/#dom-repeat:method-render

this.$.myId.render()

Answer 2

In order for the updated array to be rendered, you can update it and then set the value via a clone. For example:

this.arr[0].price = 99;
let arr_clone = this.arr.slice(0);
this.set('arr', arr_clone);

Answer 3

If you update the array with this.push('myarray', {item}); then that will trigger Polymer's binding observers.