SuperAPI AI 工具集

stimulus

通用与其它

查看项目

更新于 10-16 01:12

技能介绍

用途:Stimulus 不负责渲染 HTML,而是为服务端渲染的 HTML 附加客户端行为,让 HTML 作为唯一数据源,JS 控制器绑定到元素,data 属性负责连接。适合在 Symfony UX 中为 DOM 元素添加交互,无需服务器往返,配合 AssetMapper 时无需构建步骤。

主要能力:用 data-controller 挂载控制器;data--target 标记目标元素;data-action 以 event->controller#method 绑定事件(可按元素类型省略默认事件,支持 :prevent、键盘快捷键、@window/@document 全局事件);data--value 传类型化数据(String、Number、Boolean、Array、Object,变更触发 ValueChanged 回调);data--class 外置 CSS 类名;data--outlet 通过选择器引用其他控制器实例。可在同一元素挂载多个控制器,支持懒加载(文件首行 /* stimulusFetch: 'lazy' */,元素进入视口才加载重依赖)。

使用方式:控制器文件命名如 hello_controller.js 对应 data-controller="hello",子目录用 -- 分隔(components/modal_controller.js 对应 components--modal)。控制器可声明 static targets、values、classes、outlets,并使用 connect()/disconnect() 生命周期。Twig 中推荐直接写原生 data 属性,也可用 stimulus_controller、stimulus_target、stimulus_action 等辅助函数。

适用场景与限制:适合为服务端渲染页面添加局部交互、表单验证、下拉、提示、地图扩展等;不适合在控制器中生成 DOM。原则包括一个控制器只关注一件事、在 disconnect() 中清理监听器与第三方实例(Turbo 导航会断开重连控制器)、需要读取或监听的数据优先使用 values 而非原始 data 属性。更完整的 API、模式与注意事项见其 references/api.md、patterns.md、gotchas.md。安装与具体命令资料暂未提供。