Dodawanie ikony przycisku Bootstrap na klawiaturze do przycisku button_to w Railsach

Question

Pracuję nad książką Agile Web Development with Rails, ale używam Twitter Bootstrap zamiast niestandardowej stylizacji z książki. Mam problem z dodaniem ikony poprzez Gypsykę do metody button_to. Mój kod wygląda tak:

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

Próbowałem kilka odmian, ale nie mogę sprawić, by działało poprawnie.

Answer 1

Wygląda na to, że masz problem ze swoimi cytatami:

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

dołączyć etykietę przycisku w cudzysłowach, ucieczki podwójne cudzysłowy w tagu i, i wreszcie, zawinąć wszystko w raw() rozmowy aby zapewnić prawidłowe wyświetlanie HTML.

Alternatywnie można użyć 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" %> 

---

dobry punkt z @jordanpg: nie można mieć HTML wartości jednego przycisku, więc jego rozwiązanie jest bardziej odpowiednie i powinien dostać zatwierdzony status. część html_safe pozostaje jednak ważna.

Answer 2

Nie jestem pewien, jak to działa, ale Railsy button_to generują element <input type='submit' />, który nie dopuszcza HTML w polu wartości.

Zobacz także: input type="submit" Vs button tag are they interchangeable?

Najlepszą alternatywą w tej sytuacji jest to, aby wymusić link_to do PUT (lub 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

Korzystanie raw() lub #html_safe nadal nie działa dla mnie.

Używam metody pomocnika do tworzenia zawartości flagi button_to. Skończył przy użyciu następujących w moim metody pomocnika (ścieżka jest zdefiniowane wcześniej):

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

Answer 4

Kiedyś to jedno i to działa dobrze dla mnie:

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

Nadzieja to pomaga

Answer 5

jestem za pomocą tego pomocnika:

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

przykład:

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

i

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

Answer 6

Możesz dodać ikonę jako element dziecięcej:

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

Answer 7

Korzystanie Rails 4 i Bootstrap 3, oto jak utworzyć przycisk Usuń korzystając link_to lub button_to.

Zauważ, że używam Haml zamiast Erb.

W widoku:

- @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}?" } 

Można również wymienić content_tag część z

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

Answer 8

tę pracę dla mnie (iz wiadomości potwierdzenie)

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

to generować

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