import {inject, bindable, customElement} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
@customElement('add-company-modal')
@inject(EventAggregator)
export class AddCompanyModal {
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
}
attached() {
console.log('attached add company modal');
this.eventAggregator.subscribe('add-company-modal-toggle', open => {
console.log('getting hit');
if (open) this.open();
else this.close();
});
}
open() {
this.activate = true;
}
close() {
this.activate = false;
}
}
我这样做正确吗?基本上我有另一个正在发布事件的 View 模型。控制台日志正在被读出。这个想法是 activate
绑定(bind)到 class
:
<div class="modal-backdrop ${activate ? 'modal-show' : ''}" click.trigger="close()">
<div class="modal">
<div class="modal-title">
<h1>Add Company <span class="modal-close">x</span></h1>
</div>
<div class="modal-body modal-no-footer">
<add-company>
</add-company>
</div>
</div>
</div>
它包含在模板
中。然而,这根本没有显示出来。如果我有一个可绑定(bind)属性,但仅当您在其他虚拟机上单击“打开”时,它才有效。当您关闭模式时,您无法再次重新打开它,这就是我使用事件聚合器的原因。
所以 console.log
受到攻击,我知道我已经正确设置了事件聚合,我只是有一种感觉框架没有识别到这一点。我知道如果这是 Angular ,那么它可能会超出消化周期,但我知道 aurelia 不会那样工作。
复制
我创建了一个小型存储库来重现我的 Github 上的问题
最佳答案
activate
可能听起来比 activated
或 isActivated
更好。
仅供引用,路由器将调用一个名为 activate
的生命周期方法,因此只是想让您知道可能的冲突。
如果这没有帮助,我的下一步就是在订阅事件中记录 open
的值。我还会验证它是否不会因方法未定义错误
或任何其他错误而失败。
最后,我个人喜欢在类上或构造函数中定义属性。您可能绑定(bind)到 undefined
,因此它无法捕获值更改。
export class AddCompanyModal {
isActivated = false;
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
}
attached() {
console.log('attached add company modal');
this.eventAggregator.subscribe('add-company-modal-toggle', open => {
console.log('getting hit');
if (open) this.open();
else this.close();
});
}
open() {
this.isActivated = true;
}
close() {
this.isActivated = false;
}
}
关于javascript - 更改 View 属性 EventAggregator Aurelia,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35397184/