1. Lời mở đầu
Khi bạn làm việc với layout trong Ruby on Rails, hai khái niệm rất quan trọng mà bạn sẽ gặp là yield và content_for. Chúng giúp bạn tổ chức và tái sử dụng các phần giao diện một cách linh hoạt và rõ ràng.
Bài viết này sẽ giúp bạn hiểu rõ hai công cụ này và cách sử dụng chúng trong các ứng dụng thực tế nhé. Let's go!
2. yield trong Rails là gì?
-
Khái niệm:
TrongRails,yieldđược dùng trong layout để chèn nội dung chính của view vào layout. -
Dưới đây là ví dụ để bạn có thể hình dung cụ thể nhé:
Layout:
app/views/layouts/application.html.erb<html> <body> <header>Đây là header</header> <%= yield %> <!-- Nội dung view sẽ được chèn vào đây --> <footer>Đây là footer</footer> </body> </html>View:
app/views/posts/index.html.erb<h1>Danh sách bài viết</h1>Khi controller gọi
render :index, Rails sẽ:- Sử dụng layout
application.html.erb - Chèn nội dung từ view
index.html.erbvào vị tríyield
Kết quả sau khi render:
<html> <body> <header>Đây là header</header> <h1>Danh sách bài viết</h1> <footer>Đây là footer</footer> </body> </html> - Sử dụng layout
3. content_for trong Rails là gì?
-
Khái niệm:
content_forcho phép bạn định nghĩa nhiều vùng nội dung (content blocks) trong view và sau đó sử dụng chúng ở bất kỳ đâu trong layout thông quayield(:name). -
Khi nào cần dùng
content_for? Giả sử bạn muốn mỗi trang có một<title>khác nhau trong thẻ<head>, hoặc muốn thêm<script>chỉ riêng cho một trang cụ thể. -
Dưới đây là ví dụ về
content_fortrong rails:Layout:
app/views/layouts/application.html.erb<html> <head> <title><%= yield :title %></title> </head> <body> <%= yield %> <%= yield :scripts %> </body> </html>View:
app/views/posts/index.html.erb<% content_for :title, "Danh sách bài viết" %> <h1>Danh sách bài viết</h1> <% content_for :scripts do %> <script> console.log("Trang danh sách bài viết"); </script> <% end %>Kết quả:
yield:title sẽ nhận nội dung từcontent_for :titleyield:scripts sẽ nhận nội dung từcontent_for :scripts
Nhờ đó, bạn có thể kiểm soát nội dung từng vùng một cách tách biệt và rõ ràng.
4. So sánh yield và content_for trong rails
| Thuộc tính | yield |
content_for + yield(:name) |
|---|---|---|
| Dùng ở đâu | Layout chính | Layout và view |
| Mục đích chính | Hiển thị nội dung view chính | Định nghĩa và hiển thị vùng nội dung phụ |
| Số lượng | Một (hoặc nhiều yield(:name)) |
Nhiều vùng khác nhau (:title, :sidebar, ...) |
| Cách dùng | <%= yield %> |
content_for :name do ... end và yield(:name) |
5. Kết hợp cả hai: Xây dựng layout động và chuyên nghiệp
Bạn có thể kết hợp yield và content_for để xây dựng layout linh hoạt như ví dụ dưới đây:
-
file:
application.html.erb<html> <head> <title><%= yield(:title) || "Trang mặc định" %></title> </head> <body> <%= yield %> <%= yield(:scripts) %> </body> </html> -
file:
index.html.erb<% content_for :title, "Trang chủ" %> <% content_for :scripts do %> <script>alert("Chào mừng!");</script> <% end %> <h1>Xin chào mọi người nhé!</h1>v
6. Tổng kết.
yielddùng để hiển thị nội dung chính của view trong layout.content_fordùng để định nghĩa các vùng nội dung tùy chỉnh, có thể được chèn vào layout thông quayield(:name).- Kết hợp cả hai giúp bạn xây dựng layout linh hoạt, tái sử dụng và dễ bảo trì.
Hy vọng bài viết này giúp bạn hiểu rõ hơn về cách hoạt động của
yieldvàcontent_fortrong Rails. Có gì góp ý các bạn cứ comment ạ!