ruby-on-rails - 如何在 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 代码的内容 block 传递给函数，这会将这些 block 包装在我的自定义 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 block 放在渲染行上，但这不能正确地使用 HAML 缩进。