iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

今晚我想來點 Ruby on Rails 系列 第 11

<Day 11> 如何使用 rails link_to 方法

  • 分享至 

  • xImage
  •  

Rails link_to 方法!
其中一個你最場使用也最常見的 helper methods,但是 link_to 是怎麼運作的呢?

首先,link_to 是在做什麼的?

當然,因為我們用連結串接所有的頁面所以整個網站才會運作,這就是你會什麼可以在各個網頁互相切換,在純 html 當中,你建立一個連結像是這樣:

<a href="/ruby-book">Improve Your Ruby Skills</a>

但是在 rails 的世界看起來像是:

<%= link_to "Improve Your Ruby Skills", "/ruby-book" %>

這是為什麼呢?因為我們使用 rails 的 routes
使用 link_to 可以讓這件事情變得更輕鬆,因為我們不用插入值,使用 a tag 就會出現這個情況:

<a href="<%= book_path(@book) %>">Improve Your Ruby Skills</a>

現在,我們看這個方法裡面支援的引數,rails link_to 選項&引數,第一個參數要帶入的就是顯示在畫面上的連結文字,第二個就是你要連結到的 url。如果你要硬刻出來也不是不可以,但是大多數的時候都會使用 rails 方法或是一個 _path 方法。

只要你遵守慣例, rails 會幫你把事情都搞定,例如:

<%= link_to "Improve Your Ruby Skills", book_path(@book) %>

又例如:

<%= link_to "Improve Your Ruby Skills", @book %>

你們怎知道要用哪一個?

當參照到特定資源(book)單數表單
當參照到複數資源(books)複數表單

複數

<%= link_to "All Books", books_path %>

單數

<%= link_to "Edit Book", edit_book_path(@book) %>

這幫助你在看路徑的時候更清楚。

在上面使用像是 edit_book 的名稱你可以藉由在後面加上 _path 在你的連結裡使用。

在刪除功能的連結加上確認功能,有兩個 helpful options 你可以使用

confirm
disable_with

例如:

<%= link_to "Delete Book", @book, method: "delete", { confirm: "Are you sure?", disable_with: "Processing..." } %>

link 預設的 action 是 get, 如果你想使用 delete 你就必須明確指定。

如果你想要回到先前的頁面呢?試試看這個:

<%= link_to "Back", :back %>

如何使用客製的 CSS & HTML 屬性

可以使你的連結看起來很不一樣,例如:

<%= link_to "Get More Books", books_path, class: "index-link" %>

假設你有這個 CSS:

.index-link {
  color: blue;
  padding: 10px;
}

乳果你需要更多的 HTML 屬性( 例如 id )你就可以在 link text & link URL 之後直接加上去。

如何建立 Query Params & Anchor Links

你可以發現在建立連結的時候是可以帶有 query parameters & anchor。這個有什麼用呢?當你點擊連結的時候你就可以在 controller 有額外的資料可以使用。

來看一些例子:

Query Params url

"/search?q=all"

那你就可以這樣做

<%= link_to "Search ALL", search_path(q: "all") %>

Anchor Links url

"/books#programming"

然後你就可以這樣做

<%= link_to "Programming Books", books_path(anchor: "programming") %>

結合了 url helpes (_path / _url), link_to 給你許多的彈性可
以使用。

連結到圖片

許多人不知道 link_to 可以有一個選擇性的 block,來看看一個更複雜的情境,連結到圖片:

<%= link_to books_path do %>
  <%= image_tag "Book Collection" %>
<% end %>

在這個例子裡面,block 的內容變成了連結的文字,圖片或其他的 HTML 元素都可以點擊了。


上一篇
<Day 10>為什麼要使用 nil?
下一篇
<Day 12>如何告訴你的 Ruby 停止運行程式
系列文
今晚我想來點 Ruby on Rails 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言