我的类中有一个属性:
class Control {
@bindable households;
get people() {
return households
.map(household => househould.people)
.reduce((g1, g2) => g1.concat(g2), []);
}
}
我用它来计算所有家庭中所有people[]
的集合,然后在这里呈现:
<ul>
<li repeat.for="person of people">
${person.firstName} ${person.lastName} - ${person.phone}
</li>
</ul>
每当有人被添加到一个家庭,或者如果计算集合中任何元素的任何呈现属性、firstName
、lastName
、phone
被更新,我都需要更新列表。我如何在Aurelia中做到这一点?如果我使用@computedFrom()
,它将不会检测到数组元素的更改,而且由于所有家庭中的人员列表都是动态的,所以我不能只为每个元素创建一个观察者,而不创建一个系统来管理何时应该订阅/取消订阅观察者。
发布于 2018-10-12 17:02:44
使用脏检查
去掉@computedFrom()
,你就会得到你想要的行为。
export class App {
@bindable households;
get people() {
const households = this.households || []; // Make sure househoulds is defined.
return households.reduce((people, household) => people.concat(household.people), []);
}
}
发布于 2018-10-12 00:21:40
就在我正要放弃在谷歌上寻找解决方案的时候,Aurelia Signaling came to the rescue。这段代码最终为我所用:
<ul>
<li repeat.for="person of people">
<!-- May work without this rendering method,
this is just closer to what my actual code is doing. -->
${renderPersonInfo(person) & signal: 'example-signal'}
</li>
</ul>
还有这个类:
import {BindingSignaler} from 'aurelia-templating-resources';
@inject(BindingSignaler)
class Control {
@bindable households;
constructor(bindingSignaler) {
this.bindingSignaler = bindingSignaler;
//Obviously, you can have this trigger off any event
setInterval(() => this.bindingSignaler.signal('example-signal'), 1000);
}
get people() {
return households
.map(household => househould.people)
.reduce((g1, g2) => g1.concat(g2), []);
}
}
发布于 2018-10-15 01:33:02
您必须尽可能避免使用dirty-checking
,signals是您的场景的完美选择。请记住,如果您想在数组上使用computedFrom
,可以通过查看它的length
属性而不是dirtyChecking
来实现,就像下面的@computedFrom("myArray.length")
https://stackoverflow.com/questions/52763763
复制相似问题