[Ruby on Rails] Sử dụng TagHelper trong views

TagHelper cung cấp các phương thức để tạo các thẻ HTML theo HTML5 và các thẻ tương thích chuẩn XHTML.

Sau đây mình xin giới thiệu 4 phương thức public bao gồm: cdata_section / content_tag / escape_once / tag

cdata_section(content)

Trả về CDATA với nội dung nhất định. Các phần của CDATA được sử dụng để thoát các khối văn bản có chứa các ký tự được nhận dạng là thẻ. Các phần CDATA bắt đầu với <![CDATA[ và kết thúc với ]]>.

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]]>

Nguồn: GitHub

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

Trả về thẻ HTML bọc ngoài nội dung. Thêm thuộc tính HTML bằng cách truyền hash vào tùy chọn. Thay vì truyền nội dung như một đối số, bạn cũng có thể sử dụng khối, bạn truyền các tùy chọn của bạn làm tham số thứ hai. Đặt escape = false để vô hiệu hóa giá trị thuộc tính thoát.

 

Các tùy chọn

Tùy chọn hash có thể được sử dụng với các thuộc tính không có giá trị như (disabled and readonly), mà bạn có thể đưa ra giá trị true trong các tùy chọn. Bạn có thể sử dụng symbol hoặc string cho các tên thuộc tính.

 

Ví dụ

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("select", options, multiple: true)
 # => <select multiple="multiple">...options...</select>

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

Nguồn: on GitHub

escape_once(html)

Trả về phiên bản thoát của html mà không ảnh hưởng đến các thành phần đã thoát.

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

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

Nguồn: on GitHub

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

Trả về các thẻ HTML.  

Xây dựng các thẻ HTML

Tạo các thẻ tuân thủ HTML5 với một từ khóa. Mỗi thẻ có thể được xây dựng như sau:

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

ở đây tên thẻ có thể là br, div, section, article, hoặc bất kỳ thẻ nào.

 

Thêm nội dung cho thẻ

Các thẻ có thể thêm nội dung bên trong nó:

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>

Nội dung cũng có thể được tạo với một khối, hữu ích trong các trường hợp sau:

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

 

Tùy chọn

Sử dụng các tùy chọn đánh dấu bằng symbol để thêm thuộc tính vào thẻ được tạo ra.

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

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

Truyền vào true cho bất kì thuộc tính nào có hiển thị không có giá trị như disabled và readonly

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

Các thuộc tính HTML5 data-* có thể được đặt bằng một khóa dữ liệu chỉ tới một hash các thuộc tính phụ. Để có thể sử dụng với JavaScript, các thuộc tính phụ sẽ được dasherized. (Đọc thêm về dasherized ở đây: dasherized)

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

Do đó data-user-id có thể được truy cập như dataset.userId.

Giá trị thuộc tính dữ liệu được mã hoá cho JSON, ngoại trừ string, symbol và BigDecimals. Điều này có thể hữu ích khi sử dụng jQuery's HTML5-aware .data().

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

Các thuộc tính được tạo ra sẽ được thoát theo mặc định. Điều này có thể được vô hiệu hóa bằng cách sử dụng escape_attributes

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

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

Tag builder tuân theo HTML5, bỏ qua các thẻ đóng cho các phần tử void không có nội dung bên trong.

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

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

 

Legacy syntax

Định dạng sau đây dành cho hỗ trợ cú pháp kế thừa. Nó sẽ không còn được hỗ trợ trong các phiên bản tương lai của Rails.

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

Nó trả về một thẻ HTML trống có tên kiểu mặc định là tuân thủ XHTML.

Đặt open = true để tạo ra một thẻ mở tương thích với HTML 4.0 và thấp hơn.

Thêm thuộc tính HTML bằng cách truyền một thuộc tính hash tới các tùy chọn. Đặt escape = false để vô hiệu hóa giá trị thuộc tính thoát.

 

Các tùy chọn

Bạn có thể sử dụng symbol hoặc string để đặt tên thuộc tính.

Sử dụng true với các thuộc tính boolean có thể hiển thị không có giá trị, như disabled and readonly

Các thuộc tính HTML5 data-* có thể được đặt bằng một khóa dữ liệu chỉ tới một hash các thuộc tính phụ.

 

Ví dụ

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;]" />

Nguồn: on GitHub

---

Tài liệu về TagHelper các bạn có thể đọc thêm ở đây: https://apidock.com hoặc ở đây: http://api.rubyonrails.org