Sometimes you want to have multiple views that share HTML (and render different content only deep inside the block of HTML).

For example, modals, multi-step forms, or a wizard:

multistep-form.gif

Not to duplicate HTML, use Partials to Simplify Views. With yield and do-blocks.

Before:

# new.html.haml
<div class="modal">
  <div class="modal-header">
    New post
  </div>
  <div class="modal-body">
    <%= render "form", post: @post %>
  </div>
</div>
# edit.html.haml
<div class="modal">
  <div class="modal-header">
    Edit post
  </div>
  <div class="modal-body">
    <%= render "form", post: @post %>
  </div>
</div>

After:

# shared/_modal.html.haml
<div class="modal">
  <div class="modal-header">
    <%= title %>
  </div>
  <div class="modal-body">
    <%= yield %>
  </div>
</div>
# new.html.haml
<%= render "shared/modal", title: "New post" do %>
  <%= render "form", post: @post %>
<% end %>
# edit.html.haml
<%= render "shared/modal", title: "Edit post" do %>
  <%= render "form", post: @post %>
<% end %>

Much cleaner, isn’t it?! ;)

It is also very common to use ViewCompoenent for doing exactly this (rendering content inside an HTML block)!

= render layout: ‘courses/course_wizard/step’ do