在Polymer中，我正在使用一个函数来计算的项目dom-repeat：
<template is="dom-repeat" items="[[first4People(people, people.*)]]">
<div>
First: <span>[[item.first]]</span>
Last: <span>[[item.last]]</span>
</div>
</template>
但是，无论我尝试什么，当我更改people（people.0.first）的子属性时，都无法获得渲染更新。对数组本身所做的更改（例如this.push('people', ...)）起作用。可能是我被脏支票打了，在这种情况下，我不知道该如何覆盖它。
完整示例：
<body fullbleed unresolved>
<widget-example></widget-example>
<dom-module id="widget-example">
<template>
<div style="color: red;">Why doesn't rename first person cause a visible change?</div>
<div>First 4 people:
<template is="dom-repeat" items="[[first4People(people, people.*)]]">
<div>
First: <span>[[item.first]]</span>
Last: <span>[[item.last]]</span>
</div>
</template>
</div>
<div>
<!-- Why doesn't this work? -->
<button on-tap="renameFirstPerson">Rename first person</button>
<button on-tap="sendFrontToBack">Send front to back</button>
</div>
</template>
<script>
Polymer({
is: "widget-example",
properties: {
people: {
type: Array,
value: () => [
{'first': 'Joe', 'last': 'Blogs'},
{'first': 'Jon', 'last': 'Bigs'},
{'first': 'John', 'last': 'Doe'},
{'first': 'Josh', 'last': 'Blo'},
],
},
},
observers: [
'o(people.*)',
],
o: function(change) {
console.log('o', change)
},
first4People: function() {
console.log('first4People called');
return this.people.slice(0, 4);
},
renameFirstPerson: function() {
console.log('before sendFrontToBack', this.people)
this.set(['people.0.first'], this.people[0].first+'Foo');
// None of this causes the rename to show up.
var person = this.people[0];
this.people[0] = {};
this.people[0] = person;
this.notifyPath('people.0');
this.set('person', {});
this.set('person', person);
var people = this.get('people');
this.set('people', []);
this.set('people', people);
},
sendFrontToBack: function() {
console.log('before sendFrontToBack', this.people)
var last = this.shift('people', this.people);
this.push('people', last);
console.log('after sendFrontToBack', this.people)
},
});
</script>
</dom-module>
</body>
</html>
柱塞：http：//plnkr.co/edit/Yv27I053bk4e3cFbFuhK？p = preview
Polymer 1.x这种奇怪的工作方式，在2.0中应该能更好地工作，但是现在您必须先清空然后重写整个数据数组以重新评估更改。出于某种原因，如果您执行此操作，仍然没有任何反应，但是如果您在新框架中提供新值，则它将开始工作：
// Save the data locally
let peoples = this.people;
// Do the change in the local array
peoples[0].first += 'Foo';
// Empty the data so it can reevaluate
this.people = []; // this.set('people', []);
// Insert the new data in a new frame
requestAnimationFrame(time => {
this.people = peoples; // this.set('people', peoples);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句