我有一个 Aurelia 组件,它只是用来显示项目列表。组件的模型有一个可绑定(bind)的“items”属性:
@bindable items = [];
组件模板使用简单的 repeat 属性显示列表:
<div repeat.for="item of items">
${item.id} </div>
当我从使用该组件的页面 View 模型中将新项目推送到我的绑定(bind)数组中时,我可以看到随着列表刷新和新项目出现而添加的项目。 我的问题是当“items”数组被修改时我需要执行其他操作,所以我尝试像这样向组件添加一个 collectionObserver:
import {BindingEngine, inject} from 'aurelia-framework';
@inject(BindingEngine)
export class GridControl {
@bindable items = [];
constructor(bindingEngine) {
this.items = [];
let subscription = bindingEngine.collectionObserver(this.items)
.subscribe(this.listChanged);
}
listChanged(splices) {
// do some stuff
}
}
但是我的“listChanged”处理程序从未被调用过。知道为什么吗?
最佳答案
在构造函数中,bindingEngine.collectionObserver(this.items)
被调用。
稍后,当组件是数据绑定(bind)时,this.items
会通过数据绑定(bind)分配一个不同的数组实例。这个不同的数组实例不是您传递给绑定(bind)引擎进行观察的那个。
尝试做这样的事情:
import {BindingEngine, inject} from 'aurelia-framework';
@inject(BindingEngine)
export class GridControl {
@bindable items;
constructor(bindingEngine) {
this.bindingEngine = bindingEngine;
}
listChanged(splices) {
// do some stuff
}
subscribeItems() {
if (this.items) {
this.subscription = this.bindingEngine.collectionObserver(this.items)
.subscribe(splices => this.listChanged(splices));
}
}
unsubscribeItems() {
if (this.subscription) {
this.subscription.dispose();
this.subscription = null;
}
}
itemsChanged() {
this.unsubscribeItems();
this.subscribeItems();
}
unbind() {
this.unsubscribeItems();
}
}
关于typescript - 更改集合时不会触发 Aurelia CollectionObserver 处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40979144/