[譯] 在 Rails 中使用 Flash Message(即時資訊)

shiweifu發表於2020-07-06

(本文翻譯自:https://www.rubyguides.com/2019/11/rails-flash-messages/

什麼是即時資訊?

即時資訊是即時資訊是一種將資訊顯示給你的 Rails 網站使用者的一種方式,用於告訴他們發生了什麼事。

示例:

  • 密碼被修改(確認提示)
  • 使用者沒有找到(錯誤資訊)

即時資訊往往在 Controller 中設定即時資訊,然後再檢視中渲染出來。你的使用者得到所需要的資訊。

讓我們來學習它如何工作。

如何使用即時資訊

你可以通過使用 flash 助手函式,來發起提示資訊。

他們用起來很像 Ruby hash。

即時資訊物件具有像 keysany?,或者 each 這種方法,要訪問即時資訊,則是使用 []

那麼,你可以設定哪些型別的的訊息呢?

預設情況下,你可以設定:

  • notice
  • alert

這是一個使用例子:

flash.alert = "User not found."

另一種風格:

flash[:alert] = "User not found."

(兩者只是風格不同)

你可以使用這些程式碼,在你的 Controller Actions 中,比如 indexcreatenew 之類的。

另一種使用方式:

redirect_to :books_path, notice: "Book not found"

這允許你在一步中,重定向頁面和建立即時訊息。

這很棒呦!

Alert 對比 Notice

據我瞭解,alert 或者 notice 具體使用哪個,不是很重要。哪個用著合適,就用哪個。

我習慣使用 alert 顯示錯誤資訊,使用 notice 顯示一些提示資訊。

兩者主要還是風格的區別。

舉個例子

你可以將 alert 顯示為紅色,將 notice 顯示為綠色。

你也可以根據需要,在控制器中,使用 add_flash_types,來建立你自己的訊息型別。

像這樣:

class ApplicationController
  add_flash_types :info, :error, :warning
end

我喜歡保持簡單,所以內建的訊息型別已經足夠我用啦。

渲染即時資訊

即時資訊不會自動顯示,你必須在你的檢視上渲染他們,然後才能看到。您可以考慮將他們新增到佈局檢視上

這是程式碼:

<% flash.each do |type, msg| %>
  <div>
    <%= msg %>
  </div>
<% end %>

這這句程式碼放在你想顯示它們的地方,通常是放在頁面頂端,選單欄下面。

記住:

即時訊息只會顯示一次,然後就會被移除,不會再顯示。

美化你的即時訊息

即時訊息預設沒有內建樣式。

如果你使用 Bootstrap,你可以將 alert alert-info CSS 類新增到即時訊息上,它們會看起來好看很多。

例子:

<% flash.each do |type, msg| %>
  <div class="alert alert-info">
    <%= msg %>
  </div>
<% end %>

如果你沒有使用 Bootstrap,你可以根據你的需求,自定義通知的樣式。

何時需要顯示即時訊息?

即時訊息被顯示出來後,將在控制器下一次動作時被移除。

根據這個特性,做一個總結:

  • 如果你呼叫 redirect_to,並顯示出 flash hash 中的即時訊息,那麼一切正常
  • 如果你呼叫 redirect_to,但並沒有顯示出即時訊息,那麼訊息仍然儲存在 flash hash 中
  • 如果你在設定訊息到 flash hash 同一個 action 中顯示即時訊息,那麼 flash 訊息會被顯示出來,但是 flash 中的訊息不會被刪除,所以它會被顯示兩次。

所以……

該如何在當前的 action 中顯示即時訊息呢?

flash.now 閃亮登場。

這是一個例子:

def index
  @books = Book.all
  flash.now[:notice] = "We have exactly #{@books.size} books available."
end

這將在 index 檢視渲染出即時訊息。

notice 中的內容將被顯示,隨即就被刪除掉,使用這種方式,訊息不會被顯示兩次。

所以,當你想要使用 render 而不是重定向頁面的時候,你需要使用 flash.now 來進行訊息顯示。

總結

在本文中,你學習到了關於 Rails 中,有關即時訊息的知識,以及如何正確使用它。

最後,需要注意的是,即時訊息與錯誤驗證之間的區別。錯誤驗證是與模型物件有關的,你需要使用模型的 errors 方法,來訪問有關驗證錯誤的資訊,比如 @user.errors

現在是時候去寫一些程式碼,來實踐在本文中學到的知識啦。

感謝閱讀。

相關文章