Событие Aurelia не сработает при загрузке первой страницы

Question

Я использую Аурелию EventAggregator публиковать и подписываться на события в моем приложении. Некоторые из моих пользовательских элементов загружаются некоторое время, поэтому я использовал loading событие, чтобы рассказать мой главный app.js добавить спиннер на страницу во время загрузки.

Это прекрасно работает после загрузки приложения, и я начинаю переключаться между маршрутами, однако при загрузке первой страницы событие, похоже, не срабатывает - или, по крайней мере, оно не регистрируется subscribe метод.

Вот в основном то, что мой app.js делает:

attached () {
    this.mainLoadingSubscription = this.eventAggregator.subscribe('main:loading', isLoading => {
        // If main is loading
        if (isLoading) {
            document.documentElement.classList.add('main-loading');
        }
        // Stopped loading
        else {
            document.documentElement.classList.remove('main-loading');
        }
    });
}

А вот что делают мои пользовательские элементы:

constructor () {
    this.eventAggregator.publish('main:loading', true);
}

attached () {
    this.doSomeAsyncAction.then(() => {
        this.eventAggregator.publish('main:loading', false);
    });
}

Это приводит к тому, что при загрузке первой страницы не отображается счетчик, и вместо этого страница выглядит неработающей.

Кстати, я знаю о том, что вы можете вернуть Promise от элемента attached метод, но я не могу сделать это из-за этой другой проблемы

Answer 1

Настройте свои подписки в конструкторе viewModel или активируйте обратный вызов

В приведенном выше примере вы настраиваете подписки в ViewModel attached() Перезвоните. К сожалению, это не будет вызвано, пока все дочерние пользовательские элементы attached() вызываются обратные вызовы, что намного позже любого пользовательского элемента constructor() функция называется.

Попробуй это:

app.js

@inject(EventAggregator)
export class AppViewModel {

    constructor(eventAggregator) {
        this.mainLoadingSubscription = eventAggregator.subscribe('main:loading', isLoading => {
            // do your thing
        }
    }
}

Если viewModel - это маршрут, по которому можно перейти, то обработайте это в activate() обратный вызов с соответствующим разбором в deactivate() Перезвоните.

@inject(EventAggregator)
export class AppViewModel {

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

    activate() {
        this.mainLoadingSubscription = this.eventAggregator.subscribe('main:loading', isLoading => {
            // do your thing
        }
    }

    deactivate() {
        this.mainLoadingSubscription.dispose();
    }
}