v7.0.0
更多資訊請前往 rubyonrails.org: 更多在 Ruby on Rails

Action View Helpers

閱讀本指南後,您將瞭解:

1 Action View 提供的 helpers 的 Overview

WIP:此處未列出所有幫助程式。有關完整列表,請參閱 API 文件

以下只是對 Action View 中可用助手的簡要概述。建議您檢視 API 文件,其中更詳細地涵蓋了所有幫助程式,但這應該是一個很好的起點。

1.1 資產標籤Helper

此 module 提供了生成 HTML 的方法,這些 HTML 將 views 連結到影象、JavaScript 檔案、樣式表和提要等資產。

預設情況下,Rails 連結到公共資料夾中當前主機上的這些資產,但您可以透過在應用程式配置中設定 config.asset_host,通常在 config/environments/production.rb 中,指示 Rails 連結到來自專用資產伺服器的資產。例如,假設您的資產主機是 assets.example.com

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

返回一個連結標籤,瀏覽器和提要閱讀器可以使用它來自動檢測 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" />
1.1.2 image_path

計算 app/assets/images 目錄中影象資產的路徑。將傳遞來自文件根目錄的完整路徑。由 image_tag 內部使用以構建影象路徑。

image_path("edit.png") # => /assets/edit.png

如果 config.assets.digest 設定為 true,指紋將被新增到檔名中。

image_path("edit.png")
# => /assets/edit-2d1a2db63fc738690021fedb5a65b68e.png
1.1.3 image_url

計算 app/assets/images 目錄中影象資源的 URL。這將在內部呼叫 image_path 並與您當前的主機或資產主機合併。

image_url("edit.png") # => http://www.example.com/assets/edit.png
1.1.4 image_tag

返回源的 HTML 影象標記。源可以是完整路徑或存在於 app/assets/images 目錄中的檔案。

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

為提供的每個源返回一個 HTML 指令碼標記。您可以傳遞存在於 app/assets/javascripts 目錄中的 JavaScript 檔案的檔名(.js 副檔名是可選的)以包含在當前頁面中,或者您可以傳遞相對於文件根目錄的完整路徑。

javascript_include_tag "common"
# => <script src="/assets/common.js"></script>
1.1.6 javascript_path

計算 app/assets/javascripts 目錄中 JavaScript 資產的路徑。如果原始檔名沒有副檔名,則將附加 .js。將傳遞來自文件根目錄的完整路徑。由 javascript_include_tag 內部使用以構建指令碼路徑。

javascript_path "common" # => /assets/common.js
1.1.7 javascript_url

計算 app/assets/javascripts 目錄中 JavaScript 資產的 URL。這將在內部呼叫 javascript_path 並與您當前的主機或資產主機合併。

javascript_url "common"
# => http://www.example.com/assets/common.js

返回指定為引數的源的樣式錶鏈接標記。如果您不指定副檔名,則 .css 將自動附加。

stylesheet_link_tag "application"
# => <link href="/assets/application.css" rel="stylesheet" />
1.1.9 stylesheet_path

計算 app/assets/stylesheets 目錄中樣式表資產的路徑。如果原始檔名沒有副檔名,則將附加 .css。將傳遞來自文件根目錄的完整路徑。由 stylesheet_link_tag 內部使用以構建樣式表路徑。

stylesheet_path "application" # => /assets/application.css
1.1.10 stylesheet_url

計算 app/assets/stylesheets 目錄中樣式表資產的 URL。這將在內部呼叫 stylesheet_path 並與您當前的主機或資產主機合併。

stylesheet_url "application"
# => http://www.example.com/assets/application.css

1.2 AtomFeedHelper

1.2.1 atom_feed

這個 helper 使構建 Atom 提要變得容易。這是一個完整的使用示例:

配置/路由.rb

resources :articles

應用程式/controllers/articles_controller.rb

def index
  @articles = Article.all

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

應用程式/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

1.3 基準Helper

1.3.1 基準

允許您測量模板中塊的執行時間並將結果記錄到日誌中。將此塊包裝在昂貴的操作或可能的瓶頸周圍,以獲得操作的時間讀數。

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

這會在日誌中新增諸如“處理資料檔案 (0.34523)”之類的內容,然後您可以在最佳化程式碼時使用它來比較時間。

1.4 快取Helper

1.4.1 快取

一種快取 view 片段而不是整個 action 或頁面的方法。這種技術對於快取選單、新聞主題列表、靜態 HTML 片段等內容非常有用。此方法採用一個包含您希望快取的內容的塊。有關詳細資訊,請參閱 AbstractController::Caching::Fragments

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

1.5 捕獲Helper

1.5.1 捕獲

capture 方法允許您將模板的一部分提取到變數中。然後,您可以在模板或佈局中的任何位置使用此變數。

<% @greeting = capture do %>
  <p>Welcome! The date and time is <%= Time.now %></p>
<% end %>

然後可以在其他任何地方使用捕獲的變數。

<html>
  <head>
    <title>Welcome!</title>
  </head>
  <body>
    <%= @greeting %>
  </body>
</html>
1.5.2 content_for

呼叫 content_for 將標記塊儲存在識別符號中以供以後使用。您可以透過將識別符號作為引數傳遞給 yield 來對其他模板或佈局中儲存的內容進行後續呼叫。

例如,假設我們有一個標準的應用程式佈局,還有一個特殊的頁面,它需要網站的其餘部分不需要的某些 JavaScript。我們可以使用 content_for 將這個 JavaScript 包含在我們的特殊頁面上,而不會增加網站的其餘部分。

app/views/layouts/application.html.erb

<html>
  <head>
    <title>Welcome!</title>
    <%= yield :special_script %>
  </head>
  <body>
    <p>Welcome! The date and time is <%= Time.now %></p>
  </body>
</html>

app/views/articles/special.html.erb

<p>This is a special page.</p>

<% content_for :special_script do %>
  <script>alert('Hello!')</script>
<% end %>

1.6 日期Helper

1.6.1 distance_of_time_in_words

將兩個 Time 或 Date 物件或整數之間的大致時間距離報告為秒。如果您想要更詳細的近似值,請將 include_seconds 設定為 true。

distance_of_time_in_words(Time.now, Time.now + 15.seconds)
# => 不到一分鐘
distance_of_time_in_words(Time.now, Time.now + 15.seconds, include_seconds: true)
# => 少於 20 秒
1.6.2 time_ago_in_words

類似於 distance_of_time_in_words,但 to_time 固定為 Time.now

time_ago_in_words(3.minutes.from_now) # => 3 minutes

1.7 除錯Helper

返回包含 YAML 轉儲物件的 pre 標籤。這建立了一種非常易讀的方式來檢查物件。

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>

1.8 表格Helper

表單 helpers 旨在透過提供一組基於您的 models 建立表單的方法,與僅使用標準 HTML 元素相比,更容易使用 models。該助手為表單生成 HTML,為每種輸入(例如,文字、密碼、選擇等)提供一種方法。當表單被提交時(即,當用戶點選提交按鈕或透過 JavaScript 呼叫 form.submit 時),表單輸入將被捆綁到 params 物件中並傳遞迴 controller。

您可以在 Action View 表單 Helpers 中瞭解有關表單助手的更多資訊 指南

1.9 JavaScriptHelper

提供在 views 中使用 JavaScript 的功能。

1.9.1 escape_javascript

JavaScript 段的轉義載體返回和單引號和雙引號。

1.9.2 javascript_tag

返回包裝提供的程式碼的 JavaScript 標記。

javascript_tag "alert('All is good')"
<script>
//<![CDATA[
alert('All is good')
//]]>
</script>

1.10 號碼Helper

提供將數字轉換為格式化字串的方法。提供了電話號碼、貨幣、百分比、精度、位置符號和檔案大小的方法。

1.10.1 number_to_currency

將數字格式化為貨幣字串(例如,$13.65)。

number_to_currency(1234567890.50) # => $1,234,567,890.50
1.10.2 number_to_human

漂亮列印(格式和近似值)一個數字,以便使用者更易讀;對於可能變得非常大的數字很有用。

number_to_human(1234)    # => 1.23 Thousand
number_to_human(1234567) # => 1.23 Million
1.10.3 number_to_human_size

將位元組的大小格式化為更易於理解的表示形式;用於向用戶報告檔案大小。

number_to_human_size(1234)    # => 1.21 KB
number_to_human_size(1234567) # => 1.18 MB
1.10.4 number_to_percentage

將數字格式化為百分比字串。

number_to_percentage(100, precision: 0) # => 100%
1.10.5 number_to_phone

將數字格式化為電話號碼(預設為美國)。

number_to_phone(1235551234) # => 123-555-1234
1.10.6 number_with_delimiter

使用分隔符將數字格式化為成組的千位。

number_with_delimiter(12345678) # => 12,345,678
1.10.7 number_with_precision

使用指定級別的 precision 格式化數字,預設為 3。

number_with_precision(111.2345)               # => 111.235
number_with_precision(111.2345, precision: 2) # => 111.23

1.11 消毒Helper

SanitizeHelper module 提供了一組方法來清除不需要的 HTML 元素的文字。

1.11.1 消毒

此清理 helper 將對所有標籤進行 HTML 編碼並去除所有未明確允許的屬性。

sanitize @article.body

如果傳遞了 :attributes:tags 選項,則只允許提到的屬性和標籤,沒有其他任何東西。

sanitize @article.body, tags: %w(table tr td), attributes: %w(id class style)

要更改多次使用的預設值,例如將表標籤新增到預設值:

class Application < Rails::Application
  config.action_view.sanitized_allowed_tags = 'table', 'tr', 'td'
end
1.11.2 sanitize_css(樣式)

清理 CSS 程式碼塊。

從文字中去除所有連結標籤,只留下連結文字。

strip_links('<a href="https://rubyonrails.org">Ruby on Rails</a>')
# => Ruby 在 Rails 上
strip_links('emails to <a href="mailto:me@email.com">me@email.com</a>.')
# => 傳送電子郵件至 me@email.com。
strip_links('Blog: <a href="http://myblog.com/">Visit</a>.')
# => 部落格:訪問。
1.11.4 strip_tags(html)

從 html 中去除所有 HTML 標籤,包括註釋。 此功能由 rails-html-sanitizer gem 提供支援。

strip_tags("Strip <i>these</i> tags!")
# => 去掉這些標籤!
strip_tags("<b>Bold</b> no more!  <a href='more.html'>See more</a>")
# => 不再大膽!檢視更多

輸出可能仍包含未轉義的 '<'、'>'、'&' 字元並混淆瀏覽器。

1.12 網址Helper

提供建立連結和獲取依賴於路由子系統的 URL 的方法。

1.12.1 url_for

返回提供的 options 集的 URL。

1.12.1.1 示例
url_for @profile
# => /profiles/1

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

引擎蓋下從 url_for 派生的 URL 的連結。主要用於 建立 RESTful 資源連結,在本例中,歸結為 將 models 傳遞給 link_to 時。

例子

link_to "Profile", @profile
# => <a href="/profiles/1">個人資料</a>

如果您的連結目標不適合 name 引數,您也可以使用塊。 ERB 示例:

<%= link_to @profile do %>
  <strong><%= @profile.name %></strong> -- <span>Check it out!</span>
<% end %>

會輸出:

<a href="/profiles/1">
  <strong>David</strong> -- <span>Check it out!</span>
</a>

請參閱 API 文件瞭解更多資訊

1.12.3 button_to

生成提交給傳遞的 URL 的表單。表單有一個提交按鈕 與 name 的 value。

1.12.3.1 示例
<%= button_to "Sign in", sign_in_path %>

大致會輸出如下內容:

<form method="post" action="/sessions" class="button_to">
  <input type="submit" value="Sign in" />
</form>

請參閱 API 文件瞭解更多資訊

1.13 CsrfHelper

返回帶有跨站點名稱的元標記“csrf-param”和“csrf-token” 分別請求防偽引數和token。

<%= csrf_meta_tags %>

正常表單會生成隱藏欄位,因此它們不使用這些標籤。更多的 詳細資訊可以在 Rails 安全指南 中找到。

回饋

我們鼓勵您幫助提高本指南的品質。

如果您發現任何拼寫錯誤或資訊錯誤,請提供回饋。 要開始回饋,您可以閱讀我們的 回饋 部分。

您還可能會發現不完整的內容或不是最新的內容。 請務必為 main 新增任何遺漏的文件。假設是 非穩定版指南(edge guides) 請先驗證問題是否已經在主分支上解決。 請前往 Ruby on Rails 指南寫作準則 查看寫作風格和慣例。

如果由於某種原因您發現要修復的內容但無法自行修補,請您 提出 issue

關於 Ruby on Rails 的任何類型的討論歡迎提供任何文件至 rubyonrails-docs 討論區