コレクションが変更されたとき、Aurelia CollectionObserverハンドラはトリガされません

Question

Aureliaコンポーネントは、アイテムのリストを表示することになっています。コンポーネントのモデルはバインド可能である「アイテム」プロパティがあります：私はから私のバインドされた配列に新しい項目を押すと

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

：

@bindable items = []; 

をコンポーネントテンプレートは、単純な繰り返しの属性を使用してリストを表示しますコンポーネントが使用されているページのビューモデルでは、リストが更新されて新しいアイテムが表示されるときにアイテムが追加されているのがわかります。

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」ハンドラ： 私の問題は、私は「アイテムの配列がそのように私はこのようなコンポーネントにcollectionObserverを追加しようとしました変更されたときに、他のアクションを実行する必要があるということです。どんな考え？

Answer 1

コンストラクタでは、bindingEngine.collectionObserver(this.items)が呼び出されます。

後で、コンポーネントがデータバインドされている場合、this.itemsにはデータバインディングを介して別の配列インスタンスが割り当てられます。この異なる配列インスタンスは、あなたが観測のためにバインディングエンジンに渡したインスタンスではありません。 - ちょうど `.subscribeを試してみてください（=> this.listChanged（スプライス）をスプライス）`代わりに、それが動作するかどうかを確認

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