ObserveとTrigger

ObserveとTrigger

Observe要素とTrigger要素を使用すると、ページ内の変更を監視できます。

この例では、いくつかのダウンロードリンクをTriggerでラップし、ダウンロードリンクがクリックされたときにメッセージを表示します。

<Trigger option="example.trigger" value="win32">
  [Download](https://dl.pstmn.io/download/latest/win32)
</Trigger>

<Observe option="example.trigger" value="win32">
  ...
</Observe>

イベントはページを越えて追跡され、キーcom.box.developer.observable_eventsを使用してローカルストレージに一定期間保持されます。ガイド全体で一意のオプション名と値を使用することが重要です。

Observeオブジェクトがその子コンテンツの表示/非表示を自動的に切り替えることはありません。その代わり、子の周囲に[data-triggered=true]属性を追加すると、それを使用してネストされたスタイルを適用できます。

ユーザーの選択を追跡するには、代わりにChoice要素とChoices要素を使用してください。

複数の値の監視

Observe要素は、カンマ区切りリストを使用して複数の値をリッスンできます。

<Trigger option="example.multiple" value="win32">
  [Download](https://dl.pstmn.io/download/latest/win32)
</Trigger>

<Trigger option="example.multiple" value="macos">
  [Download](https://dl.pstmn.io/download/latest/macos)
</Trigger>

<Observe option="example.multiple" value="win32,macos">
  ...
</Observe>

設定されていない値の監視

場合によっては、値がまだ設定されていないときに何らかの操作を実行することもできます。この場合は、unsetオプションを使用して、代わりにイベントをリッスンするよう要素を設定します。

<Observe option="example.unset" unset>
  ...
</Observe>

...