Команда make:stimulus-controller

Команда make:stimulus-controller создаёт новый Stimulus-контроллер - JavaScript-класс, который подключается к HTML-элементам через атрибут data-controller и оживляет их на стороне клиента. Первым параметром передаётся имя контроллера. Команда генерирует файл в каталоге assets/controllers и регистрирует его в файле assets/controllers.json либо в assets/bootstrap.js.

Синтаксис

php bin/console make:stimulus-controller <name>

Пример

Давайте создадим Stimulus-контроллер с именем hello:

php bin/console make:stimulus-controller hello

После выполнения команды в проекте появится файл assets/controllers/hello_controller.js:

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
	connect() {
		console.log('hello controller connected');
	}
}

Пример

Давайте используем созданный контроллер в Twig-шаблоне и повесим его на элемент через атрибут data-controller:

<div data-controller="hello">
	<p>abcde</p>
</div>

При загрузке страницы Stimulus найдёт элемент с атрибутом data-controller="hello" и вызовет метод connect созданного класса.

Пример

Давайте добавим в контроллер действие, которое реагирует на клик по кнопке. Для этого в классе опишем метод и укажем его в атрибуте data-action:

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
	connect() {
		console.log('hello controller connected');
	}
	
	greet() {
		console.log('hello');
	}
}

Теперь повесим действие на кнопку в шаблоне:

<div data-controller="hello">
	<button data-action="click->hello#greet">abcde</button>
</div>

При клике по кнопке Stimulus вызовет метод greet и в консоль будет выведено:

"hello"

Смотрите также

команда make:controller,
которая создаёт обычный контроллер
команда make:twig-component,
которая создаёт Twig-компонент
команда importmap:require,
которая подключает JS-пакет через importmap
команда assets:install,
которая устанавливает веб-ресурсы в public