Rails和bootstrap – 将HTML标记添加到提交按钮文本

我有一个使用ajax的like /不同按钮的表单:

= form_for like, :html => { :method => :delete}, :remote => true do |f| = f.submit pluralize(@video.likes.count, 'like'), :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..." 

表格完美无缺。

我想在提交按钮的文本前面添加一个图标。 添加图标的haml代码如下(twitter bootstrap):

 %i.icon-heart.icon-white 

有没有办法将这个HTML添加到按钮? 我尝试将其添加为纯HTML,但rails将其呈现为文本。

UPDATE

我已经设法将提交按钮封装在包含图标和相应样式的span类中。 我现在需要删除按钮上的每个样式……

 %span.btn.btn-danger.btn-mini %i.icon-heart.icon-white = f.submit pluralize(@video.likes.count, 'like') 

感谢ismaelga,我发现了这个问题 。

这是解决方案:

 <%= button_tag(type: 'submit', class: "btn btn-primary") do %>  Save <% end %> 

试试这个。 我没有测试,但我认为可以做这样的事情。

 = f.submit :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..." do %i.icon-heart.icon-white = pluralize(@video.likes.count, 'like') end 

因此,如果您使用simple_form,这是可能的。 对不起。

所以另一种尝试是

 = f.submit "#{pluralize(@video.likes.count, 'like')} ".html_safe, :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..." 

另一个选项可能是button代替submit

请参阅Rails文档FormBuilder#按钮

 = f.button :class => "btn btn-warning btn-mini" do %i.icon-heart.icon-white = pluralize(@video.likes.count, 'like') 

Justin D的回答也帮助了我。 如果你是从谷歌来到这里并且你正在寻找一个Slim实现,你可以这样做:

 = button_tag(type: 'submit', class: 'btn btn-default') do span.glyphicon.glyphicon-floppy-disk> | Save end 

苗条的用户将认识到>的必要性。

自2014年9月24日起,这对我使用Rails 4.1.5,Ruby 2.1.2和bootstrap-sass 3.2。

Soluction

 = button_to('Add', line_item_path, method: :post , class: "btn btn-warning btn-lg" , params: { param1: 'value1', param2: 'value2' }) 

http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87

如何在链接中放置图像?

问题本身的公认答案可行,但更像是一个补丁,而不是保持代码风格清晰一致的完美解决方案。 它回溯到使用标准和手动视图方法: #button_tag 。 我倾向于避免使用#submit_tag,#form_tag,#input_tag等手动方法,因为它们与支持的模型或表单模型本身无关,您需要手动执行所有操作。 即使提交与f.没有关联f. form_for中的每个输入都有例如f.input ... ,它是关于样式,代码可读性和良好的编程实践。 这段代码完全正常(form_for和simple_form):

 = f.button :button, type: :submit, class: 'class1 class2 ... classN' do = 'button call to action text' %i.fa.fa-download.ml5 // => haml icon as requested 

希望它能帮助其他人像我一样试图避免_tag方法。

请尝试以下代码。 有用

 <%= f.submit :class => "btn btn-success btn-mini" %>