设计简洁
无缝集成
性能优化
懒加载
Web 标准
Stimulus Twig 助手
stimulus_controller
此函数将 Stimulus 控制器附加到 HTML 元素,并允许传递可在控制器内访问的值(通过 data-attributes)。
这些值对于向控制器的逻辑提供动态数据或配置非常有用。
<div {{ stimulus_controller('userProfile', {userId: 42, theme: 'dark'}) }}>
Welcome to your profile!
</div>
{# would render as #}
<div data-controller="userProfile" data-user-profile-user-id-value="42"
data-user-profile-theme-value="dark">
Welcome to your profile!
</div>
stimulus_target
此函数在 Stimulus 控制器中定义一个或多个目标。这些目标允许您直接从控制器的逻辑与特定的 DOM 元素进行交互。
<div {{ stimulus_controller('userProfile') }}>
<span {{ stimulus_target('userProfile', 'name') }}>John Doe</span>
<span {{ stimulus_target('userProfile', 'avatar') }}>
<img src="avatar.jpg" alt="John's Avatar">
</span>
</div>
{# would render as #}
<div data-controller="userProfile">
<span data-user-profile-target="name">John Doe</span>
<span data-user-profile-target="avatar">
<img src="avatar.jpg" alt="John's Avatar">
</span>
</div>
stimulus_action
此函数将事件监听器附加到 HTML 元素,定义触发控制器中特定方法的操作。
这通过将 DOM 事件(如 click
、input
等)直接映射到控制器方法,简化了事件处理,提高了代码的清晰度和可维护性。
<button {{ stimulus_action('userProfile', 'save', 'click') }}>
Save Profile
</button>
{# would render as #}
<button data-action="click->userProfile#save">
Save Profile
</button>
安装它
$ composer require symfony/stimulus-bundle