Skip to content

Add a note about using raw data attributes as a prefered way #1336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 9, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src/StimulusBundle/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,27 @@ directory. In fact, you should have an example controller there already: ``hello
}
}

Use the Twig functions from this bundle to activate your controllers:
Then, activate the controller in your HTML:

.. code-block:: html+twig

<div data-controller="hello">
...
</div>

Optionally, this bundle has a Twig function to render the attribute:

.. code-block:: html+twig

<div {{ stimulus_controller('hello') }}>
...
</div>

<!-- would render -->
<div data-controller="hello">
...
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should update a bit more, starting with the "Use the Twig functions..." line. Something like:

Then, activate the controller in your HTML:

(show the raw data-controller example).

Then after, something like:

Optionally, this bundle has a Twig function to render the attribute:

(show the stimulus_controller())


That's it! Whenever this element appears on the page, the ``hello`` controller
will activate.

Expand Down Expand Up @@ -159,6 +172,17 @@ Stimulus Twig Helpers
This bundle adds 3 Twig functions/filters to help add Stimulus controllers,
actions & targets in your templates.

.. note::

Though this bundle provides these helpful Twig functions/filters, it's
recommended to use raw data attributes instead, as they're straightforward.

.. tip::

If you use PhpStorm IDE - you may want to install
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add this phrase as a tip bloc :)

[Stimulus plugin](https://plugins.jetbrains.com/plugin/18940-stimulus)
to get nice auto-completion for the attributes.

stimulus_controller
~~~~~~~~~~~~~~~~~~~

Expand Down Expand Up @@ -243,6 +267,11 @@ there's also a ``stimulus_controller`` filter:
Hello
</div>

<!-- would render -->
<div data-controller="chart other-controller" data-chart-name-value="Likes">
Hello
</div>

You can also retrieve the generated attributes as an array, which can be helpful e.g. for forms:

.. code-block:: twig
Expand Down