Thêm biểu tượng nút Twitter Bootstrap vào button_to trong Rails

Question

Tôi đang làm việc thông qua sách Agile Web Development with Rails nhưng tôi đã sử dụng Twitter Bootstrap thay vì kiểu tùy chỉnh từ sách. Tôi gặp sự cố khi thêm biểu tượng qua GLyphonics vào phương thức button_to. Mã của tôi trông giống như sau:

<%= button_to <i class="icon-search icon-white">Add To Cart</i>, 
       line_items_path(product_id: product), 
       class: "btn btn-success" %> 

Tôi đã thử khá nhiều biến thể nhưng dường như không làm cho nó hoạt động chính xác.

Answer 1

Dường như bạn có một vấn đề với dấu ngoặc kép của bạn:

<%= button_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
      line_items_path(product_id: product), 
      class: "btn btn-success" %> 

Kèm theo nhãn của các nút trong dấu ngoặc kép, thoát khỏi dấu ngoặc kép trong thẻ i của bạn, và cuối cùng, quấn tất cả mọi thứ thành một cuộc gọi raw() để đảm bảo HTML được hiển thị đúng.

Hoặc bạn có thể sử dụng html_safe:

<%= button_to "<i class=\"icon-search icon-white\">Add To Cart</i>".html_safe, 
      line_items_path(product_id: product), 
      class: "btn btn-success" %> 

---

điểm tốt từ @jordanpg: bạn không thể có HTML trong giá trị của một nút, vì vậy giải pháp của mình là thích hợp hơn và cần được phê duyệt trạng thái. phần html_safe vẫn hợp lệ.

Answer 2

Tôi không biết OP hoạt động như thế nào, nhưng Rails button_to tạo thành phần <input type='submit' />, không cho phép HTML trong trường giá trị.

Xem thêm: input type="submit" Vs button tag are they interchangeable?

Giải pháp thay thế tốt nhất trong tình huống này là để buộc link_to để PUT (hoặc POST):

<%= link_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
      line_items_path(product_id: product), 
      class: "btn btn-success", 
      method: :put %> 

Answer 3

Sử dụng liệu() hoặC#html_safe vẫn không làm việc cho tôi.

Tôi đang sử dụng phương pháp trợ giúp để tạo nội dung gắn cờ button_to. Đã kết thúc bằng cách sử dụng sau đây trong phương pháp helper của tôi (đường dẫn được định nghĩa trước):

form_tag path, :method => :post do 
    button_tag do 
    content_tag :i, 'Flag as inappropriate', :class => 'icon-flag flag_content' 
    end 
end 

Answer 4

tôi đã sử dụng một này và nó hoạt động tốt đối với tôi:

<%= link_to(line_items_path(product_id: product), 
    method: :put, 
    class: 'btn btn-success') do %> 
    <%= content_tag('i', nil, class: 'icon-search icon-white') %> Add To Cart 
<% end %> 

Hope this helps

Answer 5

Tôi sử dụng trình trợ giúp này:

module ApplicationHelper 
    def glyph(*names) 
    content_tag :i, nil, class: names.map{|name| "icon-#{name.to_s.gsub('_','-')}" } 
    end 
end 

Ví dụ:

glyph(:share_alt) 
=> <i class="icon-share-alt"></i> 

và

glyph(:lock, :white) 
=> <i class="icon-lock icon-white"></i> 

Answer 6

Bạn có thể thêm các biểu tượng như một phần tử con:

<%= button_to button_path, method: :delete do %> 
    <span class="glyphicon glyphicon-search"></span> 
<% end %> 

Answer 7

Sử dụng Rails 4 và Bootstrap 3, dưới đây là cách để tạo ra một nút delete sử dụng link_to hoặc button_to.

Lưu ý rằng tôi đang sử dụng Haml thay vì Erb.

Theo quan điểm của bạn:

- @users.each do |user| 
    = link_to content_tag(:i, ' Delete', class: "glyphicon glyphicon-trash"), 
    users_path(user), 
    class: "btn btn-danger", 
    method: :delete, 
    data: { confirm: "Delete user #{user.username}?" } 

Bạn cũng có thể thay thế một phần content_tag với

raw('<i class="glyphicon glyphicon-trash"> Delete</i>'), 

Answer 8

Công việc này đối với tôi, (và với thông điệp xác nhận)

<%= button_to "/home/delete?cardId="+card.id.to_s, data: { confirm:'Are you sure you want to delete?' } do %> 
    <i class="fa fa-times"></i> 
<% end%> 

này tạo ra

<form class="button_to" method="post" action="/home/delete?cardId=15"> 
<button data-confirm="Are you sure you want to delete?" type="submit"> 
    <i class="fa fa-times"></i> 
</button> 
</form>