8000 [Turbo] Use blocks instead of partials to render turbo-streams · symfony/ux@d3a799d · GitHub
[go: up one dir, main page]

Skip to content

Commit d3a799d

Browse files
[Turbo] Use blocks instead of partials to render turbo-streams
1 parent 02ae73b commit d3a799d

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

src/Turbo/doc/index.rst

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,7 @@ Let's discover how to use Turbo Streams to enhance your `Symfony forms`_::
343343
if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
344344
// If the request comes from Turbo, set the content type as text/vnd.turbo-stream.html and only send the HTML to update
345345
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
346-
return $this->render('task/success.stream.html.twig', ['task' => $task]);
346+
return $this->renderBlock('task/new.html.twig', 'success_stream', ['task' => $task]);
347347
}
348348

349349
// If the client doesn't support JavaScript, or isn't using Turbo, the form still works as usual.
@@ -360,14 +360,16 @@ Let's discover how to use Turbo Streams to enhance your `Symfony forms`_::
360360

361361
.. code-block:: html+twig
362362

363-
{# success.stream.html.twig #}
364-
<turbo-stream action="replace" target="my_div_id">
363+
{# end of new.html.twig #}
364+
{% block success_stream %}
365+
<turbo-stream action="replace" targets="#my_div_id">
365366
<template>
366367
The element having the id "my_div_id" will be replaced by this block, without a full page reload!
367368

368369
<div>The task "{{ task }}" has been created!</div>
369370
</template>
370371
</turbo-stream>
372+
{% endblock %}
371373

372374
Supported actions are ``append``, ``prepend``, ``replace``, ``update``
373375
and ``remove``. `Read the Turbo Streams documentation for more details`_.
@@ -379,19 +381,15 @@ When you return a Turbo stream, *only* the elements in that stream template will
379381
be updated. This means that if you want to reset the form, you need to include
380382
a new form in the stream template.
381383

382-
To do that, first isolate your form rendering into a template partial so you can
383-
reuse it. Also surround the form by an element with an ``id`` so you can target
384-
it from the stream:
384+
To do that, first isolate your form rendering into a block so you can reuse it:
385385

386-
.. code-block:: html+twig
386+
.. code-block:: diff
387387
388-
{# templates/task/_form.html.twig #}
389-
<div id="task-form">
390-
{# render your form however you want #}
391-
{{ form(form) }}
392-
</div>
388+
{# new.html.twig #}
389+
+{% block task_form %}
390+
{{ form(form) }}
391+
+{% endblock %}
393392
394-
Include this from your existing template (e.g. `new.html.twig`) to render it.
395393
Now, create a "fresh" form and pass it into your stream:
396394

397395
.. code-block:: diff
@@ -405,7 +403,7 @@ Now, create a "fresh" form and pass it into your stream:
405403
{
406404
$form = $this->createForm(TaskType::class, new Task());
407405
408-
+ $emptyForm = clone $form ;
406+
+ $emptyForm = clone $form;
409407
$form->handleRequest($request);
410408
411409
if ($form->isSubmitted() && $form->isValid()) {
@@ -414,7 +412,7 @@ Now, create a "fresh" form and pass it into your stream:
414412
if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
415413
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
416414
417-
return $this->render('task/success.stream.html.twig', [
415+
return $this->renderBlock('task/new.html.twig', 'success_stream', [
418416
'task' => $task,
419417
+ 'form' => $emptyForm,
420418
]);
@@ -432,14 +430,16 @@ Now, create a "fresh" form and pass it into your stream:
432430
433431
Now, in your stream template, "replace" the entire form:
434432

435-
.. code-block:: html+twig
433+
.. code-block:: diff
436434
437-
{# success.stream.html.twig #}
438-
<turbo-stream action="replace" target="task-form">
439-
<template>
440-
{{ include('task/_form.html.twig') }}
441-
</template>
442-
</turbo-stream>
435+
{# new.html.twig #}
436+
{% block success_stream %}
437+
+<turbo-stream action="replace" targets="form[name=task]">
438+
+ <template>
439+
+ {{ block('task_form') }}
440+
+ </template>
441+
+</turbo-stream>
442+
<turbo-stream action="replace" targets="#my_div_id">
443443
444444
.. _chat-example:
445445

@@ -564,7 +564,7 @@ Let's create our chat::
564564

565565
{# chat/message.stream.html.twig #}
566566
{# New messages received through the Mercure connection are appended to the div with the "messages" ID. #}
567-
<turbo-stream action="append" target="messages">
567+
<turbo-stream action="append" targets="#messages">
568568
<template>
569569
<div>{{ message }}</div>
570570
</template>
@@ -621,23 +621,23 @@ created, modified or deleted:
621621

622622
{# templates/broadcast/Book.stream.html.twig #}
623623
{% block create %}
624-
<turbo-stream action="append" target="books">
624+
<turbo-stream action="append" targets="#books">
625625
<template>
626626
<div id="{{ 'book_' ~ id }}">{{ entity.title }} (#{{ id }})</div>
627627
</template>
628628
</turbo-stream>
629629
{% endblock %}
630630

631631
{% block update %}
632-
<turbo-stream action="update" target="book_{{ id }}">
632+
<turbo-stream action="update" targets="#book_{{ id }}">
633633
<template>
634634
{{ entity.title }} (#{{ id }}, updated)
635635
</template>
636636
</turbo-stream>
637637
{% endblock %}
638638

639639
{% block remove %}
640-
<turbo-stream action="remove" target="book_{{ id }}"></turbo-stream>
640+
<turbo-stream action="remove" targets="#book_{{ id }}"></turbo-stream>
641641
{% endblock %}
642642

643643
By convention, Symfony UX Turbo will look for a template named

0 commit comments

Comments
 (0)
0