invoke
Event
Invoke supports dispatching events on the client.
Dispatch Events
Dispatch an event on the window, document, and all button tags.
Open the JavaScript console to see this in action.
Server
<%= turbo_stream
.invoke(:dispatch_event, args: ["turbo-boost:streams:demo"]) # <- dispatch on window
.invoke("document.dispatchEvent", args: ["turbo-boost:streams:demo"]) # <- dispatch on document
.invoke(
:dispatch_event,
args: [
"turbo-boost:streams:demo",
{bubbles: true, detail: {source: "The invoke Turbo Stream from TurboBoost Streams"}}
],
selector: "button" # <- dispatch on selected elements
) %>
window.TurboBoostEvents = { 'turbo-boost:streams:demo': [] }
window.addEventListener('turbo-boost:streams:demo', event => {
if (event.target !== window) return
console.log(
'received the turbo-boost:streams:demo event',
event.target,
event
)
TurboBoostEvents[event.type].push(event)
})
document.addEventListener('turbo-boost:streams:demo', event => {
console.log(
'received the turbo-boost:streams:demo event',
event.target,
event
)
TurboBoostEvents[event.type].push(event)
})