Skip to content

Commit cf7545b

Browse files
committed
[Live] Adding an example of a norender model with a button to trigger the render
1 parent e4c01e8 commit cf7545b

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

src/LiveComponent/doc/index.rst

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -370,6 +370,29 @@ it won't, yet, make an Ajax call to re-render the component. Whenever
370370
the next re-render *does* happen, the updated ``max`` value will be
371371
used.
372372

373+
This can be useful along with a button that triggers a render on click:
374+
375+
.. code-block:: html+twig
376+
377+
<input data-model="norender|coupon">
378+
<button data-action="live#$render">Apply</button>
379+
380+
Forcing a Re-Render Explicitly
381+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
382+
383+
In some cases, you might want to force a component re-render explicitly. For
384+
example, consider a checkout component that provides a coupon input that must
385+
only be used when clicking on the associated "Apply coupon" button:
386+
387+
.. code-block:: html+twig
388+
389+
<input data-model="norender|coupon">
390+
<button data-action="live#$render">Apply coupon</button>
391+
392+
The ``norender`` option on the input ensures that the component won't re-render
393+
when this input changes. The ``live#$render`` action is a special built-in action
394+
that triggers a re-render.
395+
373396
.. _name-attribute-model:
374397

375398
Using name="" instead of data-model

0 commit comments

Comments
 (0)