Rails Formtastic：将“data-”字段添加到选项标签答案

【问题标题】：Rails Formtastic: adding "data-" field to option tagRails Formtastic：将“data-”字段添加到选项标签
【发布时间】：2011-10-02 05:46:40
【问题描述】：

我有：

form.input :duration, as: select, collection: {}

我需要：

<option value="" data-price="XXX"></option>

Rails 不支持选项标签的 HTML5 数据属性。 Formtastic suggests 为此创建一个辅助方法。

Formtastic 自述文件describes 如何扩展输入标签。但是，在select_input.rb 中，我找不到任何会影响 option 标记的方法。那么，我该怎么做呢？

另外，我发现 enhanced_select gem 正是我需要的，但我无法使其与 formtastic 一起使用。

【问题讨论】：

【解决方案1】：

实际上 rails 确实支持将任何类型的 html 标签添加到选项中。通常你会：

options_for_select( [['First', 1], ['Second', 2]] )

这会给你

<option value="1">First</option>
<option value="2">Second</option>

如果您在每个选项的数组中添加哈希，则哈希键/值将作为 HTML 属性添加到选项中，例如

options_for_select( [['First', 1, {:'data-price' => 20}],
                     ['Second', 2, {:'data-price' => 30}]] )

将产生所需的标签：

<option value="1" data-price="20">First</option>
<option value="2" data-price="30">Second</option>

【讨论】：

【解决方案2】：

假设您有一个名为 Items 的模型，您实际上可以像这样在 formtastic 中执行此操作：

form.select :duration, 
           collection: Items.map{|item| [item.name, item.id, {"data-price" => item.price}]}

本质上，您所做的是传递一个数组数组，其中每个数组的最终值是一个哈希值。例如。

[  
  ['Item 1', 1, {"data-price" => '$100'}],   
  ['Item 2', 2, {"data-price" => '$200'}]
]

Rails 3+（可能是 2.x - 我没有确认）将使用诸如数组中的散列并简单地将其添加到选项标签的 html 中。为您提供以下内容：

<option data-price="$100" value="1">Item 1</option>
<option data-price="$200" value="2">Item 2</option>

【讨论】：

【解决方案3】：

options_for_select([
  ['Item 1', 1, data:{price: 121, delivery: 11}],
  ['Item 2', 2, data:{price: 122, delivery: 22}]
])

生产

<option data-delivery="11" data-price="121" value="1">Item 1</option>
<option data-delivery="22" data-price="122" value="2">Item 2</option>

优势

使用data:{...}更简洁，如果使用多个data标签可以节省代码。

【讨论】：