Aurelia —— 事件聚合器

當你的事件需要附加到更多的偵聽器或當你需要觀察你的應用的一些功能並等待資料更新時，應該使用事件聚合器。

Aurelia 事件聚合器有三個方法。 publish 方法將觸發事件，並且可以被多個訂閱者使用。為了訂閱事件，我們可以使用 subscribe 方法。最後，我們可以使用 dispose 方法來分離訂閱者。以下示例對此進行了演示。

我們的檢視將只為這三個功能中的每一個提供三個按鈕。

app.html

<template>
   <button click.delegate = "publish()">PUBLISH</button><br/>
   <button click.delegate = "subscribe()">SUBSCRIBE</button><br/>
   <button click.delegate = "dispose()">DISPOSE</button>
</template>

我們需要匯入 eventAggregator 並注入它，然後才能使用它。

app.js

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
   constructor(eventAggregator) {
      this.eventAggregator = eventAggregator;
   }
   publish() {
      var payload = 'This is some data...';
      this.eventAggregator.publish('myEventName', payload);
   }
   subscribe() {
      this.subscriber = this.eventAggregator.subscribe('myEventName', payload => {
         console.log(payload);
      });
   }
   dispose() {
      this.subscriber.dispose();
      console.log('Disposed!!!');
   }
}

我們需要點選 SUBSCRIBE 按鈕來偵聽將來發布的資料。一旦訂閱者被附加，每當傳送新資料時，控制檯都會將其記錄下來。如果我們點選 PUBLISH 按鈕五次，我們將會看到它每次都會記錄下來。

我們還可以透過點選 DISPOSE 按鈕來分離我們的訂閱者。