javascript - 更改 View 属性 EventAggregator Aurelia

Question

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 上的问题

Answer 1

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