How to add HTML5 data- attributes to a rails form label tag?

问题

I have a rails form that has this code:

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

I want to add a HTML data attribute to the first label, so I tried:

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

but I get a syntax error:

SyntaxError in 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('...

I can add it as

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

That generates:

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

but I don't seem to be able to add data-something attributes. I get syntax error.

How can I do this?

回答1:

The answer provided by @vee will render this correctly. The reason you are getting a syntax error is because data-addr: 'here' is not valid ruby code. That is, you can't have use the JSON hash notation with a key containing a hyphen character. You can modify it to work properly like this:

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

But the recommended approach is to declare a nested hash for 'data' attributes:

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

Or simply (as @vee suggested):

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

[OP edit:] I also found that underscores generate dashes! For example:

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

generates

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

回答2:

Use data hash as follows:

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

来源：https://stackoverflow.com/questions/20803507/how-to-add-html5-data-attributes-to-a-rails-form-label-tag

标签

html

ruby-on-rails

forms

html5-data