跳至内容 跳至搜索

Action View 标签助手

提供方法以编程方式生成 HTML 标签，既作为现代 HTML5 兼容的构建器样式，也作为传统的 XHTML 兼容标签。

方法
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 580
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 575
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 558
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哈希中提供一个值。您可以使用符号或字符串作为属性名称。

示例

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 516
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 570
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 除外。这在从 1.4.3 开始使用 jQuery 的 HTML5 感知 .data() 时可能很方便。

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 479
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 538
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