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

Jus*_* D. 28 ruby-on-rails twitter-bootstrap

我有一个使用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..."
Run Code Online (Sandbox Code Playgroud)

表格完美无缺.

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

%i.icon-heart.icon-white
Run Code Online (Sandbox Code Playgroud)

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

UPDATE

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

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

Jus*_* D. 96

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

这是解决方案:

<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
 <i class="icon-ok icon-white"></i> Save
<% end %>
Run Code Online (Sandbox Code Playgroud)

  • 即使这个解决方案有效,我也不喜欢它,因为我再也看不到f变量了:)感觉就像无处提交表格一样...... (7认同)

tom*_*rez 6

问题本身所接受的答案是可行的,但更像是一个补丁,而不是保持代码风格清晰和一致的完美解决方案。它回溯到使用标准和手动视图方法: #button_tag。我倾向于避免使用 #submit_tag、#form_tag、#input_tag 等手动方法,因为它们与支持的模型或表单模型本身无关,并且您需要手动对它们执行所有操作。尽管提交与f.a 中的每个输入都没有联系,form_for例如 for example 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
Run Code Online (Sandbox Code Playgroud)

希望它能帮助其他像我一样尝试避免_tag方法的人到达这篇文章。