如何将HTML自定义数据属性添加到Rails表单标签的标签中？

Question

我有一个Rails表单，其中包含以下代码：

<%= form_tag("../vehicles", method: "get") do %>
  <div>
    <div>
      <%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>
    </div>
    <div>
      <%= label_tag(:address, t("ui.reservations.between_now_and_param", param: @start_date.strftime(    time_format))) %>
    </div>
    <div>

我想在第一个标签中添加一个HTML数据属性，所以我尝试了：

<%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>

但是我遇到了语法错误：

Reservations#new 中的 SyntaxError

.../_form.html.erb:8: syntax error, unexpected tLABEL

');@output_buffer.append= ( label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') );@output_buffer.safe_concat('...

我可以把它添加为

    <%= label_tag(:address, t("ui.reservations.pickup"), data: 'here') %>

那会生成：

<label for="address" data="here">

但是我似乎无法添加data-something属性。我遇到了语法错误。

我该怎么做？

- Michael Durrant

Answer 1

@vee 提供的答案可以正确地呈现这个问题。你之所以会得到语法错误，是因为 data-addr: 'here' 不是有效的 Ruby 代码。也就是说，你不能使用 JSON 哈希符号来表示一个包含连字符的键。你可以按照以下方式进行修改，使其正常工作：

<%= label_tag(:address, t('ui.reservations.pickup'), 'data-addr' => 'here' %>

但是推荐的方法是为“data”属性声明一个嵌套哈希表：

<%= label_tag(:address, t('ui.reservations.pickup'), :data => {:addr => 'here'} %>

或者简单地说（如@vee建议的）：

<%= label_tag(:address, t('ui.reservations.pickup'), data: {addr: 'here'} %>

下划线也会生成破折号。例如：

<%= label_tag(:address, t('ui.reservations.pickup'), data: {from_base: 'here'} %>

生成

<label for="address" data-from-base="here">
    pickup:
</label>

- PinnyM

---

@MichaelDurrant - 是的，它确实可以 :) - PinnyM

耶稣，谢谢你。我得看过40个答案才找到下划线技巧，真是太聪明了。非常感谢你，我讨厌旧的哈希语法，我快要疯了。 - Tallboy

Answer 2

请按照以下方式使用数据哈希：

<%= label_tag(:address, t("ui.reservations.pickup"), data: {addr: 'here'}) %>
# => <label data-addr="here" for="address">...</label>

- vee