Ruby on Rails - Layouts and Partials
Introduction
Layouts and partials are essential features in Rails for creating reusable and maintainable views. Layouts provide a common structure for your application, while partials allow you to break down your views into smaller, reusable components. This guide will cover how to use layouts and partials effectively in Rails views.
Key Points:
- Layouts provide a common structure for your application's views.
- Partials allow you to reuse view code across different templates.
- This guide covers how to create and use layouts and partials in Rails.
Using Layouts
Layouts are used to wrap views with a common structure. By default, Rails uses the application layout located at app/views/layouts/application.html.erb. Here is an example of a basic layout:
<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
</head>
<body>
<header>
<h1>MyApp</h1>
</header>
<%= yield %>
<footer>
<p>© 2023 MyApp</p>
</footer>
</body>
</html>
The yield keyword is where the content of the view will be inserted.
Using Partials
Partials are used to extract and reuse view code. A partial is a file whose name starts with an underscore (_) and can be rendered in other views. Here is an example of a partial for a form:
<!-- app/views/articles/_form.html.erb -->
<%= form_with model: @article do |form| %>
<div>
<%= form.label :title %>
<%= form.text_field :title %>
</div>
<div>
<%= form.label :body %>
<%= form.text_area :body %>
</div>
<div>
<%= form.submit 'Save' %>
</div>
<% end %>
To render this partial in another view, use the render method:
<!-- app/views/articles/new.html.erb -->
<h1>New Article</h1>
<%= render 'form' %>
Passing Local Variables to Partials
You can pass local variables to partials to make them more flexible. Here is an example:
<!-- app/views/articles/_article.html.erb -->
<div>
<h2><%= article.title %></h2>
<p><%= article.body %></p>
</div>
<!-- app/views/articles/index.html.erb -->
<h1>Articles</h1>
<% @articles.each do |article| %>
<%= render 'article', article: article %>
<% end %>
In this example, the article variable is passed to the _article partial from the index view.
Rendering Collections
Rails provides a convenient way to render a collection of objects using a partial. Here is an example:
<!-- app/views/articles/index.html.erb -->
<h1>Articles</h1>
<%= render partial: 'article', collection: @articles %>
This will render the _article partial for each item in the @articles collection.
Using Layouts for Partials
Partials can also use layouts. This is useful for adding common structure to partials. Here is an example:
<!-- app/views/articles/_article.html.erb -->
<div>
<h2><%= article.title %></h2>
<p><%= article.body %></p>
</div>
<!-- app/views/articles/index.html.erb -->
<h1>Articles</h1>
<%= render partial: 'article', collection: @articles, layout: 'layouts/article_list' %>
<!-- app/views/layouts/_article_list.html.erb -->
<div class="swf-lsn-article-list">
<%= yield %>
</div>
This will wrap the rendered partials with the _article_list layout.
Nested Layouts
Rails also supports nested layouts for organizing your views hierarchically. Here is an example:
<!-- app/views/layouts/admin.html.erb -->
<html>
<head>
<title>Admin</title>
</head>
<body>
<header>
<h1>Admin Panel</h1>
</header>
<%= yield %>
</body>
</html>
<!-- app/views/layouts/admin/articles.html.erb -->
<!-- This will use the admin layout -->
<% content_for :body do %>
<h2>Admin Articles</h2>
<%= yield %>
<% end %>
<%= render layout: 'layouts/admin', &content %>
Conclusion
Layouts and partials are powerful tools in Rails for creating reusable and maintainable views. By understanding how to use them effectively, you can build structured and efficient view templates for your Rails applications.