Pub/sub with Zermatt.Event

Docs

Using Alpine.bind to attach Zermatt components to existing DOM elements.

See feature documentation.

Below is a complete example of an advanced use of Zermatt.Event.

Open these files from the /vendor/maddlen/module-zermatt-examples/view/frontend directory:

templates/events.phtml
web/js/zermatt/modules/events.js

The events.phtml template has a button which triggers the onInputChange() method of events.js.

Zermatt.Event.on

Without changing anything in the events.js file here is how the browser console looks like when hitting the "Trigger" button 6 times.

👉 onInputChange
📈 Count: 1
🟢 event-1 received
Completed events:  ['event-1'] ['{"message":"Event 1 dispatched"}']
Completed events:  ['event-2'] ['{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 2
🟢 event-1 received
Completed events:  ['event-1'] ['{"message":"Event 1 dispatched"}']
Completed events:  ['event-2'] ['{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 3
🟢 event-1 received
Completed events:  ['event-2'] ['{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 4
🟢 event-1 received
Completed events:  ['event-2'] ['{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 5
🟢 event-1 received
👉 onInputChange
📈 Count: 6
🟢 event-1 received

Zermatt.Event.once

If this.subscriber = Zermatt.Event.on becomes this.subscriber = Zermatt.Event.once, the browser console now shows:

👉 onInputChange
📈 Count: 1
🟢 event-1 received
Completed events:  ['event-1'] ['{"message":"Event 1 dispatched"}']
Completed events:  (2) ['event-1', 'event-2'] (2) ['{"message":"Event 1 dispatched"}', '{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 2
🟢 event-1 received
👉 onInputChange
📈 Count: 3
🟢 event-1 received
👉 onInputChange
📈 Count: 4
🟢 event-1 received
👉 onInputChange
📈 Count: 5
🟢 event-1 received
👉 onInputChange
📈 Count: 6
🟢 event-1 received

Zermatt.Event.waitOn

If this.subscriber = Zermatt.Event.on becomes this.subscriber = Zermatt.Event.waitOn, the browser console now shows:

👉 onInputChange
📈 Count: 1
🟢 event-1 received
Completed events:  (2) ['event-1', 'event-2'] (2) ['{"message":"Event 1 dispatched"}', '{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 2
🟢 event-1 received
Completed events:  (2) ['event-1', 'event-2'] (2) ['{"message":"Event 1 dispatched"}', '{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 3
🟢 event-1 received
Completed events:  ['event-2'] ['{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 4
🟢 event-1 received
Completed events:  ['event-2'] ['{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 5
🟢 event-1 received
👉 onInputChange
📈 Count: 6
🟢 event-1 received

Zermatt.Event.waitOnce

If this.subscriber = Zermatt.Event.on becomes this.subscriber = Zermatt.Event.waitOnce, the browser console now shows:

👉 onInputChange
📈 Count: 1
🟢 event-1 received
Completed events:  (2) ['event-1', 'event-2'] (2) ['{"message":"Event 1 dispatched"}', '{"message":"Event 2 dispatched"}']
👉 onInputChange
📈 Count: 2
🟢 event-1 received
👉 onInputChange
📈 Count: 3
🟢 event-1 received
👉 onInputChange
📈 Count: 4
🟢 event-1 received
👉 onInputChange
📈 Count: 5
🟢 event-1 received
👉 onInputChange
📈 Count: 6
🟢 event-1 received

Precognitive form Themes