Sử dụng content_for để Refactor view
This post hasn't been updated for 7 years
1. Giới thiệu
- Trong layout của bạn có những
đoạn code
html, css hay js dài loằng ngoằng... đượclặp đi lặp lại
và việc viêt đi viết lại đoạn code này khiến bạn thấy nhàm chán, khiến cho code của bạn ko đc clear... và bạn đang tìm một cách nào đó tối ưu hơn để khắc phục vấn đề này. Thì hôm nay, mình sẽ giới thiệu cho các bạn một phương pháp để giải quyết vấn đề này. Đó là sử dụngcontent_for
đây là mộtmethod
củaActionView.
content_for
được sử dụng đểđánh dấu một khối
các câu lệnh (html, javascript hay css ...) vào mộtđịnh danh
để lưu lại phục vụ cho việc sử dụng sau này.- Để truy cập và lấy nội dung đã được lưu trữ để sử dụng trong các templetes, helper modules hay trong các layout, bạn chỉ cần đưa
định danh
mà bạn đã đặt vào trongcontent_for
như mộtargument
2. Khai báo:
content_for(name, content = nil, options = {}, &block)
ví dụ:
<% content_for :dinh_danh do %>
<<khối lệnh>>
<% end %>
3. Sử dụng
Sau khi khai báo thì ta chỉ cần chuyền định danh ta đã khai báo vào để lấy ra sử dụng ta có thể dùng theo các cách sau:
-
Cách gọi:
<%= content_for :dinh_danh %>
Câu lệnh trên tương đương với câu lệnh sau:
<%= yield :dinh_danh %>
-
Sử dụng trong module helper
module HeaderHelper def display_header content_for(:header) || "Header default" end end
Với cách dùng trên, khi ta gọi hàm
<% display_header %>
màcontent_for :header
chưa được định nghĩa thìdisplay_header
sẽ lấygiá trị mặc định
là "Header default". -
Cách chèn mã css/javascript cho những trang cụ thể bạn muốn chèn, còn những trang khác thì không. Cách làm mình như sau:
-
Mình sẽ đặt tên indentifier
specific_page_css
, vàspecific_page_js
chung cho các định danh content_for cho mã css và mã javascript và đặt vào tronglayouts/application.html.erb
như sau:<html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Hướng dẫn sử dụng content_for</title> <%= content_for :specific_page_css %> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <%= yield %> </div> <%= content_for :specific_page_js %> </body> </html>
(thông thường mã css sẽ đc đặt trên đầu còn js đặt ở phía dưới nên mình để vào theo cấu trúc như vậy để tiện quản lý) Bạn cũng có thể khai báo với tên khác cho từng khối css/js bạn muốn chèn và gọi vào ở trong view tuy nhiên theo mình thấy thì sử dụng theo cách của mình sẽ đỡ tốn thời gian khai báo lại chỗ sử dụng, lúc này chỉ cần vào trang nào muốn chèn css/js vào thì chỉ cần nghĩa khối content_for là xong, và khi không có định nghĩa thì nó sẽ tự động nhận giá trị nil.
-
Tiếp theo muốn sử dụng ở trang nào thì mình chỉ cần định nghĩa khối
content_for
:specific_page_css
hay:specific_page_js
mình muốn chèn vào. Ví dụ. tại trangshow.html.erb
muốn chèn vào css là một đoạn css được định nghĩa trongassets/stylesheets/custom.scss
và js muốn truyền vào là một đoạn js được định nghĩa trongassets/javascripts/custom.js
. Thì ta định:
<% content_for :specific_page_css do %> <%= stylesheet_link_tag :custom %> <% end %> <h1> Show page </h1> <% content_for :specific_page_js do %> <%= javascript_include_tag :custom %> <% end %>
kết quả thu được:
<html> <head> <META http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Hướng dẫn sử dụng content_for</title> <<nội dung css trong file custom.scss >> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <h1> Show page </h1> </div> <<nội dung js trong file custom.js>> </body> </html>
-
4. Kết luận
Trên đây mình đã giới thiệu cho các bạn về 1 cách cơ bản để Refactor vew bằng cách sử dụng content_for. các bạn có thể tìm hiểu hem tại đây
All Rights Reserved