如何将 HTML5 数据属性添加到 Rails 表单标签标签？答案

【问题标题】：How to add HTML5 data- attributes to a rails form label tag?如何将 HTML5 数据属性添加到 Rails 表单标签标签？
【发布时间】：2014-01-15 05:04:54
【问题描述】：

我有一个包含以下代码的 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

.../_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 属性。我收到语法错误。

我该怎么做？

【问题讨论】：

标签： html ruby-on-rails forms html5-data

【解决方案1】：

@vee 提供的答案将正确呈现。您收到语法错误的原因是 data-addr: 'here' 不是有效的 ruby 代码。也就是说，您不能将 JSON 哈希表示法与包含连字符的键一起使用。您可以像这样修改它以使其正常工作：

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

但推荐的方法是为“数据”属性声明嵌套散列：

<%= 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>

【讨论】：

@MichaelDurrant - 是的：)
耶稣，谢谢你。我是如何查看 40 个答案才能找到 _ 下划线技巧的，那是天才。非常感谢，我讨厌旧的哈希语法，我快要发疯了。

【解决方案2】：

使用data哈希如下：

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

【讨论】：