Turbo Stream¶

Render from Django View¶

from turbo_helper import (
    turbo_stream,
)

# simple example
turbo_stream.append("dom_id", "OK")
turbo_stream.append("dom_id", content="OK")

# template example
turbo_stream.append(
  "dom_id",
  template="simple.html",
  context={"msg": "my content"},
  request=request
)

Notes:

request, context are optional
If content is not set, then template is required to render the content.

Turbo Stream built-in actions are all supported in syntax turbo_stream.xxx:

append
prepend
replace
update
remove
before
after

TurboStreamResponse¶

In Django view, we should use TurboStreamResponse to wrap Turbo Stream elements so the client can recognize it.

from turbo_helper import TurboStreamResponse

# render multiple turbo stream elements in one response
return TurboStreamResponse([
  turbo_stream.append(
    "message",
    template="message.html",
    context={"msg": "my content"},
    request=request
  ),
  turbo_stream.update(
    "form",
    template="form.html",
    context={"form": form},
    request=request
  ),
])

Or cleaner way:

from turbo_helper import turbo_stream

# render multiple turbo stream elements in one response
return turbo_stream.response([
  turbo_stream.append(
    "message",
    template="message.html",
    context={"msg": "my content"},
    request=request
  ),
  turbo_stream.update(
    "form",
    template="form.html",
    context={"form": form},
    request=request
  ),
])

Morph Method¶

As for update and replace actions, we can set [method="morph"] to make it work.

turbo_stream.update("target", content="some html", method="morph")

In Django template:

{% load turbo_helper %}

{% turbo_stream "update" "target" method="morph" %}some html{% endturbo_stream %}

Render from Django Template¶

turbo_stream can help us generate turbo-stream element in Django template.

{% load turbo_helper %}

{% turbo_stream 'append' 'messages' %}
  {% include 'core/components/message.html' %}
{% endturbo_stream %}

{% turbo_stream 'update' 'new_task' %}
  {% include 'components/create.html' %}
{% endturbo_stream %}

Notes:

First argument is turbo stream action
Second argument is turbo stream target
Other arguments can be passed as key=value pairs
We can generate multiple turbo stream elements in one template and render it in one response, and update multiple part of the page in one response.

Targeting Multiple Elements¶

To target multiple elements with a single action, use the targets attribute with a CSS query selector instead of the target attribute

turbo_stream.append_all(
  ".old_records", template="simple.html", context={"msg": "my content"}
)

# <turbo-stream action="append" targets=".old_records">

Or template tag

{% turbo_stream_all "remove" ".old_records" %}{% endturbo_stream_all %}