[Ruby on Rails] Sử dụng TagHelper trong views
This post hasn't been updated for 6 years
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 & 3")
# => "1 < 2 & 3"
escape_once("<< Accept & Checkout")
# => "<< Accept & 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="["Chicago","IL"]"></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 & 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 & shut.png" />
tag("img", {src: "open & shut.png"}, false, false)
# => <img src="open & shut.png" />
tag("div", data: {name: 'Stephen', city_state: %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="["Chicago","IL"]" />
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
All Rights Reserved