@@ -343,7 +343,7 @@ Let's discover how to use Turbo Streams to enhance your `Symfony forms`_::
343
343
if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
344
344
// If the request comes from Turbo, set the content type as text/vnd.turbo-stream.html and only send the HTML to update
345
345
$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]);
347
347
}
348
348
349
349
// 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`_::
360
360
361
361
.. code-block :: html+twig
362
362
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">
365
366
<template>
366
367
The element having the id "my_div_id" will be replaced by this block, without a full page reload!
367
368
368
369
<div>The task "{{ task }}" has been created!</div>
369
370
</template>
370
371
</turbo-stream>
372
+ {% endblock %}
371
373
372
374
Supported actions are ``append ``, ``prepend ``, ``replace ``, ``update ``
373
375
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
379
381
be updated. This means that if you want to reset the form, you need to include
380
382
a new form in the stream template.
381
383
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:
385
385
386
- .. code-block :: html+twig
386
+ .. code-block :: diff
387
387
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 %}
393
392
394
- Include this from your existing template (e.g. `new.html.twig `) to render it.
395
393
Now, create a "fresh" form and pass it into your stream:
396
394
397
395
.. code-block :: diff
@@ -405,7 +403,7 @@ Now, create a "fresh" form and pass it into your stream:
405
403
{
406
404
$form = $this->createForm(TaskType::class, new Task());
407
405
408
- + $emptyForm = clone $form ;
406
+ + $emptyForm = clone $form;
409
407
$form->handleRequest($request);
410
408
411
409
if ($form->isSubmitted() && $form->isValid()) {
@@ -414,7 +412,7 @@ Now, create a "fresh" form and pass it into your stream:
414
412
if (TurboBundle::STREAM_FORMAT === $request->getPreferredFormat()) {
415
413
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
416
414
417
- return $this->render ('task/success.stream. html.twig', [
415
+ return $this->renderBlock ('task/new. html.twig', 'success_stream ', [
418
416
'task' => $task,
419
417
+ 'form' => $emptyForm,
420
418
]);
@@ -432,14 +430,16 @@ Now, create a "fresh" form and pass it into your stream:
432
430
433
431
Now, in your stream template, "replace" the entire form:
434
432
435
- .. code-block :: html+twig
433
+ .. code-block :: diff
436
434
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">
443
443
444
444
.. _chat-example :
445
445
@@ -564,7 +564,7 @@ Let's create our chat::
564
564
565
565
{# chat/message.stream.html.twig #}
566
566
{# 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">
568
568
<template>
569
569
<div>{{ message }}</div>
570
570
</template>
@@ -621,23 +621,23 @@ created, modified or deleted:
621
621
622
622
{# templates/broadcast/Book.stream.html.twig #}
623
623
{% block create %}
624
- <turbo-stream action="append" target=" books">
624
+ <turbo-stream action="append" targets="# books">
625
625
<template>
626
626
<div id="{{ 'book _' ~ id }}">{{ entity.title }} (#{{ id }})</div>
627
627
</template>
628
628
</turbo-stream>
629
629
{% endblock %}
630
630
631
631
{% block update %}
632
- <turbo-stream action="update" target=" book_{{ id }}">
632
+ <turbo-stream action="update" targets="# book_{{ id }}">
633
633
<template>
634
634
{{ entity.title }} (#{{ id }}, updated)
635
635
</template>
636
636
</turbo-stream>
637
637
{% endblock %}
638
638
639
639
{% block remove %}
640
- <turbo-stream action="remove" target=" book_{{ id }}"></turbo-stream>
640
+ <turbo-stream action="remove" targets="# book_{{ id }}"></turbo-stream>
641
641
{% endblock %}
642
642
643
643
By convention, Symfony UX Turbo will look for a template named
0 commit comments