イベント

クラス/コンストラクタで構築されたほとんどのFramework7コンポーネント(Framework7クラス自体も含む)は、イベントエミッタAPIを持っています。

これにより、コンポーネント間のイベントを含め、あらゆる種類のイベントを簡単にエミットし、処理することができます。

パラメータ内のイベントハンドラ

APIを使ってアプリのインスタンスやその他のコンポーネントを作成する際に、アプリやコンポーネントの初期化時にイベントハンドラをonパラメータで渡すことができます。

var app = new Framework7({
  ...
  on: {
    // 各オブジェクトのキーは、同じ名前のイベントハンドラを意味します。
    pageInit: function (page) {
      // ページの初期化で何かをする
    },
    popupOpen: function (popup) {
      // ポップアップのオープン時に何かをする
    },
  },
});

var popup = app.popup.create({
  ...
  on: {
    open: function (popup) {
      // ポップアップのオープン時に何かをする
    }
  }
})

イベントメソッド

イベントハンドラの追加・削除は、以下のインスタンスメソッドを使って行うこともできます。

イベントハンドラの追加

var app = new Framework7({/*...*/});

var popup = app.popup.create({/*...*/});

app.on('pageInit', function (page) {
  // ページ開始時に何かをする
});

app.on('popupClose', function (popup) {
  // ポップアップのクローズ時に何かをする
});

popup.on('open', function (popup) {
  // ポップアップオープン時に何かを行う
});

// 一度だけ動作するハンドラです。
popup.once('close', function (popup) {
  // ポップアップの終了時に何かをする
});

複数のハンドラの追加

複数のイベントをスペースで区切って第一引数に渡すことができます。

app.on('popupOpen popupClose', function (popup) {
  // do something on popupOpen and popupClose
});

イベントハンドラの削除

名前付きの関数ハンドラを削除することができます。

function onTabShow() {
  // タブが表示されたときに何かをする
}

// ハンドラを追加する
app.on('tabShow', onTabShow);

// 後で tabShow ハンドラを削除します。
app.off('tabShow', onTabShow);

すべてのハンドラの削除

.off` メソッドに第 2 引数のハンドラを渡さなかった場合、このイベントに割り当てられたすべてのハンドラを削除します。

// すべての tabShow ハンドラを削除する
app.off('tabShow');

イベントの放出

もちろん、イベントをエミットすることもできますし、必要に応じてあらゆる種類のカスタムイベントを作成することもできます。

app.on('myCustomEvent', function (a, b) {
  console.log(a); // -> 'foo'
  console.log(b); // -> 'bar'
});

app.emit('myCustomEvent', 'foo', 'bar');

イベントの委譲

コンポーネントに発行されたイベントは、アプリのインスタンスにも委譲されます。

app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('something'); // will trigger "something" event assigned to both app and popup instances

これが必要でない場合は、いわゆる local イベントをコンポーネントに発行することができます。この場合、イベント名の前に local:: を付ける必要があります。

app.on('something', function () {/*...*/});

popup.on('something', function () {/*...*/});

popup.emit('local::something'); // will only trigger "something" event assigned to popup instance above

イベントハンドラのコンテキスト

イベントハンドラのコンテキスト (this) は、それが割り当てられたインスタンスを常に指し示します。

app.on('popupOpen', function () {
  console.log(this); // -> app instance
});
popup.on('popupOpen', function () {
  console.log(this); // -> popup instance
});

イベントバス

Framework7クラスの現在のイベントエミッタAPIは、アプリのコンポーネントやモジュール間の通信用にカスタムイベントを作成するのにも非常に便利です。

また、メインアプリや一部のコンポーネントのインスタンスをフラッディングすることなく、イベントバスとしてのみ使用するように設計された追加のヘルパークラスがあります。

新しいイベントバスを作成するには、new Framework7.Events()を呼び出す必要があります。

// カスタムイベントバスの作成
var myEvents = new Framework7.Events();

// イベントの処理
myEvents.on('some-event', function () {
  // some-event' が発生したら何かをする
})

// イベントを発する
myEvents.emit('some-event');

// 別のイベントバスの作成
const notificationEvents = new Framework7.Events();

notificationEvents.on('notificationReceived', function (notification) {
  // 通知で何かをする
})

// アプリのどこかで通知を送る
notificationEvents.emit('notificationReceived', {
  title: 'New message',
  from: 'John Doe',
});