Actions and Targets
An example on how turbo_stream is rendered:
= 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> |
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 |
Reusing server side templates inline:
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.