ใช้ link_to กับ HTML ที่ฝังไว้


100

ฉันใช้สิ่ง Bootstrap ของ Twitter และฉันมี HTML ต่อไปนี้:

<a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a>

อะไรคือวิธีที่ดีที่สุดในการทำสิ่งนี้ใน Rails? ฉันอยากจะใช้<%= link_to 'Do it', user_path(@user) %>แต่<i class="icon-ok icon-white"></i>มันทำให้ฉันทิ้งไปงั้นเหรอ?

คำตอบ:


260

สองทาง. ทั้ง:

<%= link_to user_path(@user) do %>
  <i class="icon-ok icon-white"></i> Do it@
<% end %>

หรือ:

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>

1
บางทีมันควรจะ<%= link_to ...อยู่ในตัวอย่างด้วย block?
Voldy

มันควรจะเป็นอย่างแน่นอน ขอบคุณ!
Veraticus

3
อาจจะไม่มี ".html_safe" หลังสตริงสำหรับไอคอนในตัวอย่างที่สอง?
โฮส.

ฉันไม่รู้ว่าคุณสามารถผ่านด่านไปได้link_to- ขอบคุณที่สอนฉัน!
yas4891

16

เมื่อเร็ว ๆ นี้ฉันมีความต้องการแบบเดียวกัน ลองสิ่งนี้:

<%= link_to '<i class="icon-ok icon-white"></i> Do it'.html_safe, user_path(@user) %>


11

คุณยังมีความเป็นไปได้ที่จะสร้างวิธีการช่วยเหลือดังต่อไปนี้:

def link_fa_to(icon_name, text, link)
  link_to content_tag(:i, text, :class => "fa fa-#{icon_name}"), link
end

ปรับคลาสให้เข้ากับความต้องการของคุณ


8

หากคุณต้องการลิงค์ในรางที่ใช้คลาสไอคอนเดียวกันจาก twitter bootstrap สิ่งที่คุณต้องทำก็คือสิ่งนี้

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>

2
@PeterNixey ไม่มันไม่ทำให้ดูเหมือนปุ่ม หากคุณออกจากbtnชั้นเรียนสิ่งที่คุณเห็นคือไอคอน ลักษณะปุ่มไม่ได้หมายความว่าเป็นปุ่ม
Webdevotion


6

ในอัญมณี twitter-bootstrap-rail: พวกเขาสร้างสัญลักษณ์ผู้ช่วย

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

ดังนั้นคุณสามารถใช้มันได้เช่น: glyph(:twitter) และคุณเชื่อมโยงผู้ช่วยอาจมีลักษณะดังนี้:link_to glyph(:twitter), user_path(@user)


คุณสามารถอนุญาตหลาย clases สำหรับแท็ก ... ในทุกกรณีจะเป็นกรณีการใช้งานหรือไม่?
eveevans

1
นี่เป็นวิธีที่ยอดเยี่ยมในการสร้างลิงค์ด้วยสัญลักษณ์ (Font Awesome)! <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>ในการเพิ่มชั้นเรียนมากขึ้นใช้สิ่งที่ต้องการ นี่commentsคือชื่อของตัวอักษร Font Awesome post_path(post)เป็น URL ปลายทางและclass =>แสดงว่าจะใช้สัญลักษณ์ของคลาสใด
เวสตัน

5

ใน HTML ปกติเราทำ

<a href="register.html"><i class="fa fa-user-plus"></i> Register</a>

ใน Ruby On Rails:

<%= link_to routeName_path do %>
  <i class="fa fa-user-plus"></i> Link Name
<% end %>

<%= link_to register_path do %>
   <i class="fa fa-user-plus"></i> Register
<% end %>

นี่คือผลลัพธ์ของฉัน


3

ฉันจะให้ภาพนี้เนื่องจากคุณยังไม่ได้รับคำตอบ
และคำตอบอื่น ๆ ไม่ใช่สิ่งที่คุณต้องการ 100%
นี่คือวิธีการทำแบบ Rails

<%= link_to(user_path(@user), :class => 'btn') do %>
  <i class="icon-ok icon-white"> </i> Do it!
<% end %>

แก้ไข: ทิ้งคำตอบไว้เพื่อใช้อ้างอิงในอนาคต
แต่ @ justin-herrick มีคำตอบที่ถูกต้องเมื่อ
ทำงานกับ Twitter Bootstrap


2

ฉันคิดว่าคุณสามารถทำให้ง่ายขึ้นด้วยวิธีการช่วยเหลือหากคุณใช้บ่อยในแอปพลิเคชันของคุณ

ใส่ไว้ใน helper / application_helper.rb

def show_link(link_text, link_source)
  link_to("#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe,
    link_source, class: "btn")
end

จากนั้นเรียกใช้จากไฟล์มุมมองของคุณเช่นเดียวกับ link_to

<%= show_link "Do it", user_path(@user) %>

2

หากคุณใช้ bootstrap 3.2.0 คุณสามารถใช้ตัวช่วยนี้ในไฟล์ app/helpers/application_helper.rb

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

จากนั้นในมุมมองของคุณ:

link_to glyph(:pencil) + ' Edit', edit_post_path(@post), class: 'btn btn-warning'

1
def show_link (source, text)
  link_to source, {'data-original-title' => 'Show', 'data-toggle' => 'tooltip', :class => 'btn btn-xs btn-success'} do
    "#{text} #{content_tag :i, nil, class:' glyphicon glyphicon-eye-open' }".html_safe
    end
end

0

ตัวช่วยตามคำแนะนำของ Titas Milan แต่ใช้บล็อก:

def show_link(link_text, link_source)
  link_to link_source, { class: 'btn' } do
    "#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe
  end
end
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.