Action View 輔助方法

閱讀本指南後，您將了解

如何格式化日期、字串和數字。
如何使用文字和標籤。
如何連結至圖片、影片、樣式表等。
如何使用 Atom feeds 和視圖中的 JavaScript。
如何快取、擷取、偵錯和清除內容。

以下概述 Action View 中可用的一些最常用的輔助方法。它是一個很好的起點，但也建議查看完整的 API 文件，因為它更詳細地涵蓋了所有輔助方法。

2 表單

與單獨使用標準 HTML 元素相比，表單輔助方法簡化了使用模型的工作。它們提供了一系列針對基於您的模型產生表單量身定制的方法。某些方法對應於特定類型的輸入，例如文字欄位、密碼欄位、選取下拉式選單等等。提交表單後，表單內的輸入會分組到 params 物件中，並傳送回控制器。

您可以在 Action View 表單輔助方法指南中了解更多關於表單輔助方法的資訊。

一組用於建構依賴路由子系統的連結和 URL 的方法。

3.5 url_for

返回為提供的 options 設定的 URL。

url_for @profile
# => /profiles/1

url_for [ @hotel, @booking, page: 2, line: 3 ]
# => /hotels/1/bookings/1?line=3&page=2

url_for @post # given a composite primary key [:blog_id, :id]
# => /posts/1_2

5 資產

一組用於產生 HTML 的方法，該 HTML 將視圖連結到資產，例如影像、JavaScript 檔案、樣式表和資訊訂閱。

預設情況下，Rails 會連結到目前主機 public 資料夾中的這些資產，但是您可以透過在應用程式設定中設定 config.asset_host，通常在 config/environments/production.rb 中設定，來指示 Rails 從專用的資產伺服器連結到資產。

例如，假設您的資產主機是 assets.example.com

config.asset_host = "assets.example.com"

則 image_tag 的對應 URL 將為

image_tag("rails.png")
# => <img src="//assets.example.com/images/rails.png" />

5.1 audio_tag

產生一個 HTML 音訊標籤，其中包含來源，可以是單一標籤（用於字串來源），或是巢狀來源標籤（用於多個來源）。sources 可以是完整路徑、您 public 音訊目錄中的檔案，或是 Active Storage 附件。

audio_tag("sound")
# => <audio src="/audios/sound"></audio>

audio_tag("sound.wav", "sound.mid")
# => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio>

audio_tag("sound", controls: true)
# => <audio controls="controls" src="/audios/sound"></audio>

在內部，audio_tag 使用來自 AssetUrlHelpers 的 audio_path 來建置音訊路徑。

請參閱 audio_tag API 文件以獲取更多資訊。

5.2 auto_discovery_link_tag

返回一個連結標籤，瀏覽器和資訊訂閱讀取器可以使用它來自動偵測 RSS、Atom 或 JSON 資訊訂閱。

auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", { title: "RSS Feed" })
# => <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="http://www.example.com/feed.rss" />

請參閱 auto_discovery_link_tag API 文件以獲取更多資訊。

5.4 image_tag

返回來源的 HTML 影像標籤。source 可以是完整路徑，或是存在於您 app/assets/images 目錄中的檔案。

image_tag("icon.png")
# => <img src="/assets/icon.png" />

image_tag("icon.png", size: "16x10", alt: "Edit Article")
# => <img src="/assets/icon.png" width="16" height="10" alt="Edit Article" />

在內部，image_tag 使用來自 AssetUrlHelpers 的 image_path 來建置影像路徑。

請參閱 image_tag API 文件以獲取更多資訊。

5.5 javascript_include_tag

為提供的每個來源返回一個 HTML script 標籤。您可以傳遞存在於您 app/assets/javascripts 目錄中的 JavaScript 檔案的檔案名稱（.js 副檔名是選用的），以包含到目前頁面中，或者您可以傳遞相對於您文件根目錄的完整路徑。

javascript_include_tag("common")
# => <script src="/assets/common.js"></script>

javascript_include_tag("common", async: true)
# => <script src="/assets/common.js" async="async"></script>

一些最常見的屬性是 async 和 defer，其中 async 將允許並行載入腳本，並在盡可能的情況下盡快進行剖析和評估，而 defer 將指示該腳本應在文件剖析後執行。

在內部，javascript_include_tag 使用來自 AssetUrlHelpers 的 javascript_path 來建置腳本路徑。

請參閱 javascript_include_tag API 文件以獲取更多資訊。

5.8 stylesheet_link_tag

為指定為引數的來源返回樣式表連結標籤。如果您未指定副檔名，則會自動附加 .css。

stylesheet_link_tag("application")
# => <link href="/assets/application.css" rel="stylesheet" />

stylesheet_link_tag("application", media: "all")
# => <link href="/assets/application.css" media="all" rel="stylesheet" />

media 用於指定連結的媒體類型。最常見的媒體類型是 all、screen、print 和 speech。

在內部，stylesheet_link_tag 使用來自 AssetUrlHelpers 的 stylesheet_path 來建置樣式表路徑。

請參閱 stylesheet_link_tag API 文件以獲取更多資訊。

5.9 video_tag

產生一個 HTML 影片標籤，其中包含來源，可以是單一標籤（用於字串來源），或是巢狀來源標籤（用於多個來源）。sources 可以是完整路徑、您 public 影片目錄中的檔案，或是 Active Storage 附件。

video_tag("trailer")
# => <video src="/videos/trailer"></video>

video_tag(["trailer.ogg", "trailer.flv"])
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>

video_tag("trailer", controls: true)
# => <video controls="controls" src="/videos/trailer"></video>

在內部，video_tag 使用來自 AssetUrlHelpers 的 video_path 來建置影片路徑。

請參閱 video_tag API 文件以獲取更多資訊。

7 替代標籤

一組以程式設計方式產生 HTML 標籤的方法。

7.2 token_list

返回從提供的引數建置的權杖字串。此方法也別名為 class_names。

token_list("cats", "dogs")
# => "cats dogs"

token_list(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"

mobile, alignment = true, "center"
token_list("flex items-#{alignment}", "flex-col": mobile)
# => "flex items-center flex-col"
class_names("flex items-#{alignment}", "flex-col": mobile) # using the alias
# => "flex items-center flex-col"

8 擷取區塊

一組方法，可讓您擷取產生的標記，這些標記可用於樣板或版面配置檔案的其他部分。

它提供一種透過 capture 將區塊擷取到變數中的方法，以及一種透過 content_for 擷取標記區塊以用於版面配置的方法。

8.2 content_for

呼叫 content_for 會將一段標記儲存在一個識別符中，以便稍後使用。您可以在其他模板、輔助模組或佈局中，透過將識別符作為參數傳遞給 yield 來後續呼叫已儲存的內容。

一個常見的用例是在 content_for 區塊中設定頁面的標題。

您可以在特殊頁面的視圖中定義 content_for 區塊，然後在佈局中 yield 它。對於其他沒有使用 content_for 區塊的頁面，它會保持空白，導致沒有任何內容被 yield。

<%# app/views/users/special_page.html.erb %>
<% content_for(:html_title) { "Special Page Title" } %>

<%# app/views/layouts/application.html.erb %>
<html>
  <head>
    <title><%= content_for?(:html_title) ? yield(:html_title) : "Default Title" %></title>
  </head>
</html>

您會注意到在上面的範例中，我們使用 content_for? 述詞方法來有條件地呈現標題。此方法會檢查是否已使用 content_for 擷取任何內容，讓您可以根據視圖中的內容來調整佈局的某些部分。

此外，您可以在輔助模組中使用 content_for。

# app/helpers/title_helper.rb
module TitleHelper
  def html_title
    content_for(:html_title) || "Default Title"
  end
end

現在，您可以在佈局中呼叫 html_title 來檢索儲存在 content_for 區塊中的內容。如果正在呈現的頁面（例如 special_page 的情況）上設定了 content_for 區塊，它將會顯示標題。否則，它將會顯示預設文字「Default Title」。

content_for 在快取中會被忽略。因此，您不應將它用於將被快取片段化的元素。

您可能在想 capture 和 content_for 之間有什麼區別？

capture 用於將一段標記擷取到一個變數中，而 content_for 用於將一段標記儲存在一個識別符中，以便稍後使用。在內部，content_for 實際上會呼叫 capture。然而，關鍵差異在於它們在多次調用時的行為。

content_for 可以重複呼叫，按照它們被提供的順序，將針對特定識別符接收到的區塊串連起來。每次後續的呼叫都會簡單地添加到已儲存的內容中。相反地，capture 只會返回區塊的內容，而不會追蹤任何先前的調用。

請參閱 content_for API 文件以獲取更多資訊。

9 效能

9.1 效能測試

將 benchmark 區塊包裝在耗時的操作或可能的瓶頸周圍，以取得該操作的時間讀數。

<% benchmark "Process data files" do %>
  <%= expensive_files_operation %>
<% end %>

這會在日誌中添加類似 Process data files (0.34523) 的內容，然後您可以使用它來比較最佳化程式碼時的時間。

這個輔助方法是 Active Support 的一部分，並且也可用於控制器、輔助方法、模型等。

請參閱 benchmark API 文件以獲取更多資訊。

9.2 快取

您可以快取視圖的片段，而不是整個動作或頁面。此技術對於快取選單、新聞主題列表、靜態 HTML 片段等很有用。它允許將視圖邏輯的片段包裝在快取區塊中，並在下次請求傳入時從快取儲存區中提供。

cache 方法會接收一個區塊，其中包含您想要快取的內容。

例如，您可以透過將應用程式佈局的頁尾包裝在 cache 區塊中來快取它。

<% cache do %>
  <%= render "application/footer" %>
<% end %>

您也可以根據模型實例進行快取，例如，您可以透過將 article 物件傳遞給 cache 方法來快取頁面上的每個文章。這會單獨快取每個文章。

<% @articles.each do |article| %>
  <% cache article do %>
    <%= render article %>
  <% end %>
<% end %>

當您的應用程式收到此頁面的第一個請求時，Rails 會寫入一個具有唯一索引鍵的新快取項目。索引鍵看起來像這樣

views/articles/index:bea67108094918eeba32cd4a6f786301/articles/1

請參閱 Fragment Caching 和 cache API 文件以獲取更多資訊。

10 其他

10.1 atom_feed

Atom Feeds 是基於 XML 的檔案格式，用於聯合內容，並且可以被 feed 閱讀器中的使用者使用來瀏覽內容，或被搜尋引擎使用來幫助發現關於您網站的額外資訊。

這個輔助方法讓建立 Atom feed 變得容易，並且主要用於建立 XML 的 Builder 模板中。這是一個完整的使用範例

# config/routes.rb
resources :articles

# app/controllers/articles_controller.rb
def index
  @articles = Article.all

  respond_to do |format|
    format.html
    format.atom
  end
end

# app/views/articles/index.atom.builder
atom_feed do |feed|
  feed.title("Articles Index")
  feed.updated(@articles.first.created_at)

  @articles.each do |article|
    feed.entry(article) do |entry|
      entry.title(article.title)
      entry.content(article.body, type: "html")

      entry.author do |author|
        author.name(article.author_name)
      end
    end
  end
end

請參閱 atom_feed API 文件以獲取更多資訊。

10.2 debug

返回一個用 pre 標籤包裝的物件的 YAML 表示形式。這會建立一種非常易讀的方式來檢查物件。

my_hash = { "first" => 1, "second" => "two", "third" => [1, 2, 3] }
debug(my_hash)

<pre class="debug_dump">---
first: 1
second: two
third:
- 1
- 2
- 3
</pre>

請參閱 debug API 文件以獲取更多資訊。