Actions and Targets
An example on how turbo_stream is rendered:
= turbo_stream.append :messages, @message |
= turbo_stream.append :messages, @message
Where :messsages is the target and @message renders the partial _message.html.haml. Then it is rendered to:
<turbo-stream action="append" target="messages">
<template>
<div id="message_23">
// This div will be append to element with id="messages"
</div>
</template>
</turbo-stream> |
<turbo-stream action="append" target="messages">
<template>
<div id="message_23">
// This div will be append to element with id="messages"
</div>
</template>
</turbo-stream>
7 possible Actions
- APPEND: Appends template to target
- PREPEND: Preppends template to target
- REPLACE: Replaces the full target with template
- UPDATE: Replaces the content of target with template
- REMOVE: Removes target
- BEFORE: Adding template before target element
- AFTER: Adding template after target
Streaming from HTTP responses
In rails controller streams will be rendered like:
def create
@message = Message.find(....)
respond_to do |format|
format.turbo_stream # renders template in: create.turbo_stream.haml
format.html { redirect_to messages_url }
end
end |
def create
@message = Message.find(....)
respond_to do |format|
format.turbo_stream # renders template in: create.turbo_stream.haml
format.html { redirect_to messages_url }
end
end
Reusing server side templates inline:
format.turbo_stream do
render turbo_stream: turbo_stream.append(:messages,
partial: "messages/message", locals: { message: @message})
end |
format.turbo_stream do
render turbo_stream: turbo_stream.append(:messages,
partial: "messages/message", locals: { message: @message})
end
Both “partial:” and “locals:” can be replaced by @message (Great Rails code!!!).
Some notes
RECOMENDATION: Good practice is design without Streams, then in poor connections or server issues, when web sockets are broken, it will run anyway. Like a browser without JavaScript.
NOTE FOR BROWSER CACHE: Attribute “data-turbo-permanent” makes element alwaiys the samen in browser cache.