HTML5ヘルパー

このヘルパーは、利用できるHTML5ジェネレータますテンプレートエンジンの独立を。それはだビューやレイアウトのためのプライベートメソッドと呼ばれます#html

使用法

これは、レイアウトで使用するどのように見えるかです:

module Web::Views
  class ApplicationLayout
    include Web::Layout

    def sidebar
      html.aside(id: 'sidebar') do
        div 'hello'
      end
    end
  end
end
<%= sidebar %>

これは、生成します。

<aside id="sidebar">
  
hello
</aside>

特徴

  • それは、HTML5の仕様に応じたタグを閉じる方法を知っている(1)
  • これは、(2)最初の引数としてコンテンツを受け入れます
  • これは、最初の引数としてビルダーを受け付ける(3)
  • これは、文字列を返すブロックとしてコンテンツを受け付ける(4)
  • これは、ネストされたマークアップ・ビルダーを有するブロックとしてコンテンツ受け付ける(5)
  • それは、与えられたハッシュから属性を構築します(6)
  • それは属性とブロックを組み合わせた(7)
# 1
html.div # => 
html.img # => <img> # 2 html.div('hello') # =>
hello
# 3 html.div(html.p('hello')) # =>

hello

# 4 html.div { 'hello' } # => #
# hello #
# 5 html.div do p 'hello' end # => #
#

hello

#
# 6 html.div('hello', id: 'el', 'data-x': 'y') # =>
hello
# 7 html.div(id: 'yay') { 'hello' } # => #
# hello #

それは、複雑なマークアップ構文をサポートしていCONCATENATEタグを必要としません。次の例では、2つがありdiv、我々は一緒にリンクを必要としないタグが。

html.section(id: 'container') do
  div(id: 'main') do
    p 'Main content'
  end

  div do
    ul(id: 'languages') do
      li 'Italian'
      li 'English'
    end
  end
end

# =>
#  <section id="container">
#    
#

Main Content

#
# #
#
    #
  • Italian
  • #
  • English
  • #
#
# </section>

結果は非常にきれいなRubyのAPIです。

カスタムタグ

花見ヘルパーは、次のような100+最も一般的なタグをサポートdivvideoまたはcanvas。我々が定義するオープンなインターフェイスを提供したかったのでしかし、HTML5は、高速でターゲットを移動され、新規またはカスタムタグを

APIは、本当に簡単です:#tag自己終了タグに使用されている必要があり#empty_tag、反対を行います。

html.tag(:custom, 'Foo', id: 'next') # => <custom id="next">Foo</custom>
html.empty_tag(:xr, id: 'next')      # => <xr id="next">

他のヘルパー

花見のHTMLヘルパーは、他の組み立てヘルパーをサポートしています。例のためのlink_toヘルパー:

html.div do
  link_to 'hello', routes.root_path, class: 'btn'
end
# => 
# => hello # =>
html.div do link_to 'Users', routes.users_path, class: 'btn' hr link_to 'Books', routes.books_path, class: 'btn' end # =>
# => Users # => # => Books # =>

自動エスケープ

タグの内容が自動的にためにエスケープされたセキュリティ上の理由:

html.div('hello')         # => 
hello
html.div { 'hello' } # =>
hello
html.div(html.p('hello')) # =>

hello

html.div do p 'hello' end # =>

hello

html.div("alert('xss')") # => "
alert('xss')
"
html.div { "alert('xss')" } # => "
alert('xss')
"
html.div(html.p("alert('xss')")) # => "

alert('xss')

"
html.div do p "alert('xss')" end # => "

alert('xss')

"

HTML属性は自動的にエスケープされていない、我々はユーザーの入力から来た値を使用する必要がある場合には、我々が使用することをお勧め、#haこの場合のために設計されたエスケープヘルパーです。参照ヘルパーエスケープ深い説明のために。

ビューコンテキスト

ビューからのローカル変数は、HTMLビルダーのネストされたブロック内部に用意されています。

module Web::Views::Books
  class Show
    include Web::View

    def title_widget
      html.div do
        h1 book.title
      end
    end
  end
end
id="content"> title_widget %>
id="content">

The Work of Art in the Age of Mechanical Reproduction

</div>