Aurelia綁定鉤在自定義元素中的「嵌套」數據更新

Question

我想在綁定對象發生更新時收到通知。 這個plunk http://plnkr.co/edit/7thr0V演示我的問題。

詳細信息： 我通過bind [data.bind]將一個對象「data」傳遞給一個自定義元素。如果我現在 更新數據中的一個屬性，我會期待，調用 自定義元素中的「dataChanged」掛鉤。 如果我從自定義元素模板中的綁定數據對象中顯示屬性，它會更新，因此綁定本身可以正常工作。

我的第二點責備是使用ObserverLocator，但它也不會觸發嵌套更新。

在app.js目的：

this.data = { 
    nested: { 
    content: "Hello nested world!" 
    } 
}; 

定製元件CE的結合：

<require from="ce"></require> 
<ce data.bind="data"></ce> 

的ce.js部分：

@bindable data; 

constructor(observerLocator) { 
    this.observerLocator = observerLocator; 

    var subscription = this.observerLocator 
     .getObserver(this, 'data') 
     //.getObserver(this, 'data["nested"]["content"]') //Doesn't work 
     //.getObserver(this, 'data.nested.content') //Doesn't work 
     .subscribe(this.onChangeData); 
} 

onChangeData(newData, oldData) { 
    console.log('data changed from ', oldData, newData); 
} 

dataChanged(d) { 
    console.log("Changed", d); 
} 

在CE模板部分：

${data.nested.content} 

在app.js中，我以2個間隔更新數據對象。 第一個間隔每秒編輯一個「嵌套」屬性。 每五秒鐘的第二個時間間隔將數據對象設置爲新的。 在第二個時間間隔，掛鉤和觀察者被調用， 但我想知道，當第一個時間間隔做任何改變。

setInterval(() => { 
    this.data.nested.content += "!"; 
}, 1000); 


setInterval(() => { 
    this.data = { 
    nested: { 
    content: "Hello nested world No. " + this.counter++ + "!" 
    } 
}; 
}, 5000); 

Answer 1

的ObserverLocator是奧裏利亞的用於觀察簡單屬性更改和陣列/圖/設置突變裸機API。

有一個新的更高級的API，名爲BindingEngine，您可以使用它來觀察複雜的表達式。

下面是一個例子：https://gist.run?id=868a7611952b2e40f350

ce.html

<template> 
    ${data.nested.content} 


    <!-- debug logging --> 
    <h4>Observed Changes:</h4> 
    <div repeat.for="change of changes"><pre><code>${change}</code></pre></div> 
</template> 

ce.js

import { 
    bindable, 
    BindingEngine, 
    inject 
} from "aurelia-framework"; 

@inject(BindingEngine) 
export class Ce { 
    @bindable data; 

    changes = []; // debug logging 

    constructor(bindingEngine) { 
    this.bindingEngine = bindingEngine; 
    } 

    expressionChanged(newValue, oldValue) { 
    // debug logging: 
    this.changes.splice(0, 0, `expressionChanged: "${newValue}"`); 
    } 

    syncSubscription(subscribe) { 
    if (this.subscription) { 
     this.subscription.dispose(); 
     this.subscription = null; 
    } 
    if (subscribe && this.data) { 
     let observer = this.bindingEngine.expressionObserver(this.data, 'nested.content'); 
     this.subscription = observer.subscribe(::this.expressionChanged); 
    } 
    } 

    dataChanged(newValue, oldValue) { 
    // subscribe to new data instance 
    this.syncSubscription(true); 

    // debug logging: 
    this.changes.splice(0, 0, `dataChanged: ${JSON.stringify(newValue, null, 2)}`); 
    } 

    attached() { 
    // subscribe 
    this.syncSubscription(true); 
    } 

    detached() { 
    // unsubscribe (avoid memory leaks) 
    this.syncSubscription(false); 
    } 
} 

爲什麼不奧裏利亞觀察更改整個對象默認？

它在速度和內存方面太急於觀察一切。並非所有瀏覽器都支持object.observe。