Given the controller awesome_app_controller.js, registered as awseome_app
export default class extends Controller {
static targets = ['input'];
}
The following :
<%= content_tag(:div, nil, data: { "awesome_app-target" => "input" }) %>
Will invariably ends up being named
<div data-awesome-app-target='input'></div>
and wont be detected by the stimulus controller as a target.
Assuming I dont want / can't rename this controller, is there a way to keep using ruby data attributes, and still get this use case through ?
Your code looks like valid data attribute for targets:
data-awesome-app-target="input"
Here awesome-app is controller identifier
Ease of Stimulus usage is ensured by compliance with the convention: when an identifier is composed of more than one word, write the words in kebab-case (i.e., by using dashes). In filenames, separate multiple words using either underscores or dashes (snake_case or kebab-case: controllers/date_picker_controller.js, controllers/list-item-controller.js)
An identifier is the name you use to reference a controller class in HTML
The following is an example of how Stimulus will generate identifiers for controllers in its require context:
| If your controller file is named… | its identifier will be… |
|---|---|
| clipboard_controller.js | clipboard |
| date_picker_controller.js. | date-picker |
| users/list_item_controller.js. | users--list-item |
| local-time-controller.js. | local-time |
Therefore by convention your controller from awesome_app_controller.js should be registered as awesome-app. You can register it manually. First import the class, then call the Application#register method on your application object:
// app/javascript/controllers/index.js
import AwesomeAppController from './awesome_app_controller'
application.register('awesome-app', AwesomeAppController)