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

我这样做是否正确？基本上我有另一个发布事件的视图模型。控制台日志正在读出。我们的想法是activate绑定到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>

这包含在template中。但是，这根本没有表现出来。如果我有bindable属性，但仅当您在另一个vm上单击打开时，它才有效。当您关闭模态时，您无法再次重新打开它，因此我使用事件聚合器的原因。

所以console.log受到了冲击，我知道我已经正确设置了事件聚合，我只是觉得框架没有选择它。我知道如果这是有角度的，那么它可能在消化周期之外，但我知道aurelia不能那样工作。

生殖

我创建了一个小型仓库来重现Github

上的问题

Answer 1

activate可能听起来更好activated或isActivated。

仅供参考，路由器将调用一个名为activate的生命周期方法，以便让您知道可能发生的冲突。

如果这对我没有帮助，下一步就是在订阅事件中记录open的值。我还要验证它没有失败method undefined error或任何东西。

最后，我个人喜欢在类或构造函数中定义属性。您可能绑定到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;
    }
}

Answer 2

问题在于订阅回调的价值总是false。

在我的代码中，这是一个错误。

更改视图属性EventAggregator Aurelia

生殖

2 个答案: