如何在Rails中创建UI组件？

Question

我有一些常见的UI组件，它们仅因内容而异。考虑这个例子：

.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

我想知道有没有办法将haml代码的内容块传递给函数，这会将这些块包装在我的自定义UI组件中？像这样：

= component
    <<
        .the_actual_top_content
    <<
        .the_actual_bottom_content

或者像这样：

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

Answer 1

执行此操作的一种方法是为UI组件定义辅助函数。例如，在ApplicationHelper中创建此辅助方法：

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

然后在您的HAML模板中执行此操作：

= some_helper do
  .the_actual_top_content

这将呈现：

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

---

修改：

找到更好的解决方案，使用render :layout：

这是一个名为_ui.html.haml的部分：

.ui
  = yield

这就是这样称呼的：

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

哪个会呈现与上面相同的HTML。

---

编辑2 虽然远非理想，但这是一种做你要求的方法：

这是一个名为_ui2.html.haml的部分：

.ui2
  .topcontent= top
  .bottomcontent= bottom

这就是这样称呼的：

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

我尝试将capture块放在渲染线上，但这与HAML缩进无法正常工作。