跳至内容 跳至搜索

Action View 标签助手 ↑

提供以现代 HTML5 兼容的构建器风格和传统的 XHTML 兼容标签两种方式以编程方式生成 HTML 标签的方法。

方法
B
C
E
T
包含的模块

常量

ARIA_PREFIXES = ["aria", :aria].to_set.freeze
 
BOOLEAN_ATTRIBUTES = %w(allowfullscreen allowpaymentrequest async autofocus autoplay checked compact controls declare default defaultchecked defaultmuted defaultselected defer disabled enabled formnovalidate hidden indeterminate inert ismap itemscope loop multiple muted nohref nomodule noresize noshade novalidate nowrap open pauseonexit playsinline readonly required reversed scoped seamless selected sortable truespeed typemustmatch visible).to_set
 
DATA_PREFIXES = ["data", :data].to_set.freeze
 
PRE_CONTENT_STRINGS = Hash.new { "" }
 
TAG_TYPES = {}
 

类公共方法

build_tag_values(*args)

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 577
def build_tag_values(*args)
  tag_values = []

  args.each do |tag_value|
    case tag_value
    when Hash
      tag_value.each do |key, val|
        tag_values << key.to_s if val && key.present?
      end
    when Array
      tag_values.concat build_tag_values(*tag_value)
    else
      tag_values << tag_value.to_s if tag_value.present?
    end
  end

  tag_values
end

ensure_valid_html5_tag_name(name)

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 572
def ensure_valid_html5_tag_name(name)
  raise ArgumentError, "Invalid HTML5 tag name: #{name.inspect}" unless /\A[a-zA-Z][^\s\/>]*\z/.match?(name)
end

实例公共方法

cdata_section(content)

返回一个带有给定 content 的 CDATA 部分。CDATA 部分用于转义包含可能被识别为标记的字符的文本块。CDATA 部分以字符串 <![CDATA[ 开头，并以（且不能包含）字符串 ]]> 结尾。

cdata_section("<hello world>")
# => <![CDATA[<hello world>]]>

cdata_section(File.read("hello_world.txt"))
# => <![CDATA[<hello from a text file]]>

cdata_section("hello]]>world")
# => <![CDATA[hello]]]]><![CDATA[>world]]>

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 555
def cdata_section(content)
  splitted = content.to_s.gsub(/\]\]>/, "]]]]><![CDATA[>")
  "<![CDATA[#{splitted}]]>".html_safe
end

class_names(*args)

别名： token_list

content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)

返回一个 name 类型的 HTML 块标签，围绕 content。通过将属性哈希传递给 options 来添加 HTML 属性。与其将内容作为参数传递，你也可以使用块，在这种情况下，将 options 作为第二个参数传递。将 escape 设置为 false 可禁用转义。注意：这是旧的语法，有关详细信息，请参阅 tag 方法的说明。

选项 ↑

options 哈希可以与没有值的属性一起使用（如 disabled 和 readonly），你可以将这些属性在 options 哈希中设置为 true。你可以使用符号或字符串作为属性名。

示例 ↑

content_tag(:p, "Hello world!")
 # => <p>Hello world!</p>
content_tag(:div, content_tag(:p, "Hello world!"), class: "strong")
 # => <div class="strong"><p>Hello world!</p></div>
content_tag(:div, "Hello world!", class: ["strong", "highlight"])
 # => <div class="strong highlight">Hello world!</div>
content_tag(:div, "Hello world!", class: ["strong", { highlight: current_user.admin? }])
 # => <div class="strong highlight">Hello world!</div>
content_tag("select", options, multiple: true)
 # => <select multiple="multiple">...options...</select>

<%= content_tag :div, class: "strong" do -%>
  Hello world!
<% end -%>
 # => <div class="strong">Hello world!</div>

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 513
def content_tag(name, content_or_options_with_block = nil, options = nil, escape = true, &block)
  ensure_valid_html5_tag_name(name)

  if block_given?
    options = content_or_options_with_block if content_or_options_with_block.is_a?(Hash)
    tag_builder.content_tag_string(name, capture(&block), options, escape)
  else
    tag_builder.content_tag_string(name, content_or_options_with_block, options, escape)
  end
end

escape_once(html)

返回 html 的转义版本，而不影响已转义的实体。

escape_once("1 < 2 &amp; 3")
# => "1 &lt; 2 &amp; 3"

escape_once("&lt;&lt; Accept & Checkout")
# => "&lt;&lt; Accept &amp; Checkout"

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 567
def escape_once(html)
  ERB::Util.html_escape_once(html)
end

tag(name = nil, options = nil, open = false, escape = true)

返回一个 HTML 标签。

构建 HTML 标签 ↑

使用标签代理构建符合 HTML5 的标签。每个标签都可以通过

tag.<tag name>(optional content, options)

来构建，其中标签名可以是 br、div、section、article，或任何标签。

传递内容 ↑

Tags 可以传递内容嵌入其中

tag.h1 'All titles fit to print' # => <h1>All titles fit to print</h1>

tag.div tag.p('Hello world!')  # => <div><p>Hello world!</p></div>

内容也可以通过块捕获，这在模板中很有用

<%= tag.p do %>
  The next great American novel starts here.
<% end %>
# => <p>The next great American novel starts here.</p>

选项 ↑

使用符号键的选项向生成的标签添加属性。

tag.section class: %w( kitties puppies )
# => <section class="kitties puppies"></section>

tag.section id: dom_id(@post)
# => <section id="<generated dom id>"></section>

对于可以渲染而没有值的属性，例如 disabled 和 readonly，请将其设置为 true。

tag.input type: 'text', disabled: true
# => <input type="text" disabled="disabled">

HTML5 data-* 和 aria-* 属性可以通过单个 data 或 aria 键指向子属性哈希来设置。

为了与 JavaScript 约定良好配合，子属性会被转换为短横线分隔的格式。

tag.article data: { user_id: 123 }
# => <article data-user-id="123"></article>

因此 data-user-id 可以通过 dataset.userId 访问。

数据属性值被编码为 JSON，字符串、符号和 BigDecimals 除外。这在使用 jQuery 的 HTML5 感知的 .data()（从 1.4.3 开始）时可能很有用。

tag.div data: { city_state: %w( Chicago IL ) }
# => <div data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]"></div>

生成的标签名和属性默认会被转义。可以通过使用 escape 来禁用此功能。

tag.img src: 'open & shut.png'
# => <img src="open &amp; shut.png">

tag.img src: 'open & shut.png', escape: false
# => <img src="open & shut.png">

标签构建器会遵守 HTML5 空元素 的规则，在没有内容传递时，会省略这些元素的闭合标签。

# A standard element:
tag.div # => <div></div>

# A void element:
tag.br  # => <br>

请注意，在使用块形式时，选项应包含在括号内。

<%= tag.a(href: "/about", class: "font-bold") do %>
  About the author
<% end %>
# => <a href="/about" class="font-bold">About the author</a>

构建 HTML 属性 ↑

将 Hash 转换为 HTML 属性，准备好插入到 ERB 中。根据其真值包含或省略布尔属性。将嵌套在 aria: 或 data: 对象中的键转换为 aria- 和 data- 前缀的属性。

<input <%= tag.attributes(type: :text, aria: { label: "Search" }) %>>
# => <input type="text" aria-label="Search">

<button <%= tag.attributes id: "call-to-action", disabled: false, aria: { expanded: false } %> class="primary">Get Started!</button>
# => <button id="call-to-action" aria-expanded="false" class="primary">Get Started!</button>

旧式语法 ↑

以下格式是为了支持旧式语法。它将在 Rails 的未来版本中被弃用。

tag(name, options = nil, open = false, escape = true)

它返回一个 name 类型的空 HTML 标签，默认情况下符合 XHTML 标准。将 open 设置为 true 可创建与 HTML 4.0 及更低版本兼容的开放标签。通过将属性哈希传递给 options 来添加 HTML 属性。将 escape 设置为 false 可禁用属性值转义。

选项 ↑

你可以使用符号或字符串作为属性名。

对于可以渲染而没有值的布尔属性，例如 disabled 和 readonly，请使用 true。

HTML5 data-* 属性可以通过单个 data 键指向子属性哈希来设置。

示例 ↑

tag("br")
# => <br />

tag("br", nil, true)
# => <br>

tag("input", type: 'text', disabled: true)
# => <input type="text" disabled="disabled" />

tag("input", type: 'text', class: ["strong", "highlight"])
# => <input class="strong highlight" type="text" />

tag("img", src: "open & shut.png")
# => <img src="open &amp; shut.png" />

tag("img", { src: "open &amp; shut.png" }, false, false)
# => <img src="open &amp; shut.png" />

tag("div", data: { name: 'Stephen', city_state: %w(Chicago IL) })
# => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />

tag("div", class: { highlight: current_user.admin? })
# => <div class="highlight" />

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 476
def tag(name = nil, options = nil, open = false, escape = true)
  if name.nil?
    tag_builder
  else
    ensure_valid_html5_tag_name(name)
    "<#{name}#{tag_builder.tag_options(options, escape) if options}#{open ? ">" : " />"}".html_safe
  end
end

token_list(*args)

返回一个由 args 构建的字符串令牌。

示例 ↑

token_list("foo", "bar")
 # => "foo bar"
token_list("foo", "foo bar")
 # => "foo bar"
token_list({ foo: true, bar: false })
 # => "foo"
token_list(nil, false, 123, "", "foo", { bar: true })
 # => "123 foo bar"
也别名为： class_names

来源： 显示 | 在 GitHub 上

# File actionview/lib/action_view/helpers/tag_helper.rb, line 535
def token_list(*args)
  tokens = build_tag_values(*args).flat_map { |value| CGI.unescape_html(value.to_s).split(/\s+/) }.uniq

  safe_join(tokens, " ")
end