我希望在绑定对象中发生更新时收到通知。 这个问题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);
答案 0 :(得分:4)
ObserverLocator
是Aurelia的裸机API,用于观察简单的属性更改和数组/地图/集变异。
有一个名为BindingEngine
的新的更高级API,您可以使用它来观察复杂的表达式。
以下是一个例子: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);
}
}
为什么aurelia默认情况下不会观察整个对象的变化?
在速度和记忆力方面过于昂贵,急切地观察一切。并非所有浏览器都支持object.observe。