Question

I have a few common UI-components, which varies only by content. Consider this example:

.component
    .top
        // a lot of component code

        .the_actual_top_content

        // some more component code
    .bottom
        // component code

        .the_actual_bottom_content

        // and more component code

I wonder is there any way to pass content blocks of haml code to function, which will wrap these blocks in my custom UI-component? Something like this:

= component
    <<
        .the_actual_top_content
    <<
        .the_actual_bottom_content

Or like this:

= render :layout => 'component' do
    = content_for :top do
        .the actual_top_content
    = content_for :bottom do
        .the_actualy_bottom_content

Answer 1

One way to do this is defining helper functions for your UI components. For example, create this helper method in ApplicationHelper:

module ApplicationHelper
  def some_helper
    content_tag :div do
      yield
    end
  end
end

And then in your HAML template do this:

= some_helper do
  .the_actual_top_content

This will render:

<div class="ui">
  <div class="the_actual_top_content"></div>
</div>

---

Edit:

Found a better solution, use render :layout:

Here is a partial called _ui.html.haml:

.ui
  = yield

Which is called like this:

= render :layout => 'ui' do
  .the_actual_top_content

Which wil render the same HTML as above.

---

Edit 2
Although far from ideal, here is a way to do what you are asking:

Here is a partial called _ui2.html.haml:

.ui2
  .topcontent= top
  .bottomcontent= bottom

Which is called like this:

- top = capture do
  .something content on top
- bottom = capture do
  .something content on bottom
= render 'ui2', :top => top, :bottom => bottom

I’ve tried to place the capture blocks on the render line, but that doesn’t work with properly with HAML indentation.