不重命名Stimulus控制器,如何适配Ruby数据属性生成规则?
解决Stimulus控制器目标识别问题
问题核心:你的Stimulus控制器注册名为awesome_app,但Ruby的content_tag会把哈希键里的下划线自动转为短横线,导致生成的目标属性data-awesome-app-target不符合Stimulus的识别规则(Stimulus期望对应蛇形控制器名的属性是data-awesome_app-target)。以下是两种不需要修改控制器的解决办法:
方法一:直接指定完整的data属性字符串键
绕过Ruby的自动转换,直接用完整的属性名作为键,这样Ruby就不会修改下划线:
<%= content_tag(:div, nil, "data-awesome_app-target": "input") %>
渲染后结果:
<div data-awesome_app-target='input'></div>
这个格式完全符合Stimulus的要求,控制器能正常识别目标。
方法二:使用Stimulus的统一目标属性格式
Stimulus支持另一种更明确的目标属性写法:data-target="控制器名.目标名",这种写法不受命名分隔符的影响,直接用Ruby的data哈希传递即可:
<%= content_tag(:div, nil, data: { target: "awesome_app.input" }) %>
渲染后结果:
<div data-target='awesome_app.input'></div>
这种写法是Stimulus的标准用法之一,控制器同样能准确识别该目标。
内容的提问来源于stack exchange,提问作者Ben
相关产品推荐
相关产品推荐

