Skip to content

Commit 5099e8b

Browse files
committed
minor #1910 [Docs][Stimulus] use camelCase for target naming (Jibbarth)
This PR was merged into the 2.x branch. Discussion ---------- [Docs][Stimulus] use camelCase for target naming | Q | A | ------------- | --- | Bug fix? | no | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT Hello! I had some trouble following the doc for use `stimulus_target` and how to use them inside my stimulus controller. As we can see [on the stimulus target doc](https://stimulus.hotwired.dev/reference/targets#naming-conventions), the value of target should be in camelCase as it's mapped in property in the controller. IE ``` <div data-my-controller-target="myElement"> ``` ``` import { Controller } from "`@hotwired`/stimulus" export default class extends Controller { static targets = [ "myElement"] // … foo() { this.myElementTarget.innerHTML = "..."; } } ``` So in this PR, I changed examples for `stimulus_target` usage. Commits ------- 4867dd1 [Docs][Stimulus] use camelCase for target naming
2 parents bb903c2 + 4867dd1 commit 5099e8b

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

src/StimulusBundle/doc/index.rst

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -337,32 +337,32 @@ For example:
337337

338338
.. code-block:: html+twig
339339

340-
<div {{ stimulus_target('controller', 'a-target') }}>Hello</div>
341-
<div {{ stimulus_target('controller', 'a-target second-target') }}>Hello</div>
340+
<div {{ stimulus_target('controller', 'myTarget') }}>Hello</div>
341+
<div {{ stimulus_target('controller', 'myTarget secondTarget') }}>Hello</div>
342342

343343
<!-- would render -->
344-
<div data-controller-target="a-target">Hello</div>
345-
<div data-controller-target="a-target second-target">Hello</div>
344+
<div data-controller-target="myTarget">Hello</div>
345+
<div data-controller-target="myTarget secondTarget">Hello</div>
346346

347347
If you have multiple targets on the same element, you can chain them as there's
348348
also a ``stimulus_target`` filter:
349349

350350
.. code-block:: html+twig
351351

352-
<div {{ stimulus_target('controller', 'a-target')|stimulus_target('other-controller', 'another-target') }}>
352+
<div {{ stimulus_target('controller', 'myTarget')|stimulus_target('other-controller', 'anotherTarget') }}>
353353
Hello
354354
</div>
355355

356356
<!-- would render -->
357-
<div data-controller-target="a-target" data-other-controller-target="another-target">
357+
<div data-controller-target="myTarget" data-other-controller-target="anotherTarget">
358358
Hello
359359
</div>
360360

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

363363
.. code-block:: twig
364364
365-
{{ form_row(form.password, { attr: stimulus_target('hello-controller', 'a-target').toArray() }) }}
365+
{{ form_row(form.password, { attr: stimulus_target('hello-controller', 'myTarget').toArray() }) }}
366366
367367
.. _configuration:
368368

0 commit comments

Comments
 (0)