Skip to content

Commit f0b1141

Browse files
authored
Merge pull request #481 from cyupa/master
Extend documentation for using Stimulus within sidecar directories
2 parents f58e7cd + f041a4b commit f0b1141

File tree

2 files changed

+27
-0
lines changed

2 files changed

+27
-0
lines changed

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## master
44

5+
* Extend documentation for using Stimulus within sidecar directories.
6+
7+
*Ciprian Redinciuc*
8+
59
* Subclassed components inherit templates from parent.
610

711
*Blake Williams*

README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,6 +1004,29 @@ application.load(
10041004

10051005
This enables the creation of files such as `app/components/widget_controller.js`, where the controller identifier matches the `data-controller` attribute in the component's HTML template.
10061006

1007+
When placing a Stimulus controller inside a sidecar directory, be aware that when referencing the controller [each forward slash in a namespaced controller file’s path becomes two dashes in its identifier](
1008+
https://stimulusjs.org/handbook/installing#controller-filenames-map-to-identifiers):
1009+
1010+
```console
1011+
app/components
1012+
├── ...
1013+
├── example
1014+
| ├── component.rb
1015+
| ├── component.css
1016+
| ├── component.html.erb
1017+
| └── component_controller.js
1018+
├── ...
1019+
```
1020+
1021+
`component_controller.js`'s Stimulus identifier becomes: `example--component`:
1022+
1023+
```erb
1024+
<div data-controller="example--component">
1025+
<input type="text">
1026+
<button data-action="click->example--component#greet">Greet</button>
1027+
</div>
1028+
```
1029+
10071030
## Frequently Asked Questions
10081031

10091032
### Can I use other templating languages besides ERB?

0 commit comments

Comments
 (0)