Question

我有一个Aurelia组件，它只是显示一个项目列表。该组件的模型有一个＆＃34;项目＆＃34;属性可绑定：

@bindable items = [];

组件模板使用简单的重复属性显示列表：

 <div repeat.for="item of items">  
    ${item.id}   </div>

当我从使用该组件的页面视图模型中推送绑定数组中的新项目时，我可以看到正在刷新列表并显示新项目时添加的项目。我的问题是我需要在＆＃39;项目＆＃39;之后执行其他操作。数组被修改，所以我尝试将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   
  } 
}

但是我的名单改变了＆＃39;处理程序从未被调用。知道为什么吗？

Answer 1

在构造函数中，调用bindingEngine.collectionObserver(this.items)。

稍后，当组件受数据绑定时，this.items通过数据绑定分配不同的数组实例。这个不同的数组实例不是您传递给绑定引擎进行观察的实例。

尝试做这样的事情：

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();
  }
}

更改集合时不会触发Aurelia CollectionObserver处理程序

1 个答案: