Rails Formtastic: thêm "đĩa dữ liệu" để lựa chọn thẻ

Question

tôi có:

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

tôi cần:

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

Rails không hỗ trợ thuộc tính HTML5 dữ liệu cho thẻ tùy chọn. Formtastic suggests để tạo phương thức trợ giúp cho việc này.

Formtastic readme describes cách mở rộng thẻ đầu vào. Tuy nhiên, trong select_input.rb Tôi không thể tìm thấy bất kỳ phương pháp nào sẽ ảnh hưởng đến thẻ tùy chọn. Vì vậy, làm thế nào để tôi làm điều này?

Ngoài ra, tôi tìm thấy enhanced_select đá quý làm chính xác những gì tôi cần, nhưng tôi không thể làm cho nó hoạt động với formtastic.

Answer 1

Thực tế, đường ray hỗ trợ thêm bất kỳ loại thẻ html nào vào tùy chọn. Thông thường, bạn sẽ có:

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

mà sẽ cung cấp cho bạn

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

Nếu bạn thêm một băm vào các mảng cho mỗi tùy chọn các phím băm/giá trị này sẽ được thêm vào như là thuộc tính HTML để lựa chọn, ví dụ

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

sẽ tạo ra các thẻ cần thiết:

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

Answer 2

Giả sử bạn có một mô hình gọi là Items, bạn thực sự có thể làm điều này trong formtastic như vậy:

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

Về cơ bản những gì bạn đang làm đang truyền một mảng các mảng trong đó giá trị cuối cùng trong mỗi mảng là một băm. Ví dụ:

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

Rails 3+ (có lẽ 2.x - Tôi đã không xác nhận) sẽ sử dụng băm trong như mảng và chỉ cần thêm nó vào html của thẻ tùy chọn. Đem lại cho bạn những điều sau:

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

Answer 3

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

Tạo

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

Advantage

Sử dụng dữ liệu: {...} ngắn gọn hơn và nếu sử dụng nhiều thẻ dữ liệu có thể lưu mã.