为什么视图中的块被渲染两次？

Question

我用 Ruby on Rails 编写的一个 Web 应用程序有很多使用的内容面板。我正在尝试编写帮助程序以使用更简洁的语法呈现这些面板。我对编写视图助手不是很熟悉，所以这可能很简单。但是，当尝试使用传递给块中的助手的“html”（erb 代码）时，我得到了奇怪的结果，其中块被渲染了两次。

相关代码如下。此示例使用 ERB，因为我对其进行了简化以避免任何可能的 HAML 问题，但我在使用 HAML 时得到了相同的结果。

我要渲染的 HTML 是：

<section class="panel panel-default">
  <header class="panel-heading">Contacts</header>

  <div class="panel-body">
    <p>Test</p>
  </div>
</section>

这是我的助手：

module ApplicationHelper
  def panel(type = :default, &block)
    tag = content_tag(:section, class: "panel panel-#{type.to_s}") do
      block.call PanelHelper.new
    end

    tag
  end

  class PanelHelper
    include ActionView::Helpers::TagHelper
    include ActionView::Context
    include ActionView::Helpers::CaptureHelper

    def header(text = nil, &block)
      if block_given?
        tag = content_tag(:header, block.call, class: 'panel-heading')
      elsif text
        tag = content_tag(:header, text, class: 'panel-heading')
      else
        raise ArgumentError, 'Either a block must be given, or a value must be provided for the text parameter.'
      end

      tag
    end

    def body(&block)
      content_tag(:div, block.call, class: 'panel-body')
    end
  end
end

这是我的看法：

<%= panel :default do |p| %>
  <%= p.header 'Contacts' %>
  <%= p.body do %>
    <p>Test</p>
  <% end %>
<% end %>

这是呈现的 HTML：

<section class="panel panel-default">
  <header class="panel-heading">Contacts</header>

  <p>Test</p>
  <div class="panel-body">
    &lt;p&gt;Test&lt;/p&gt;
  </div>
</section>

任何想法为什么会发生这种情况以及如何解决它？我可能只是对视图块有误解。

谢谢

编辑

我可以通过使用这个 body 方法让它发挥作用：

def body(&block)
  @helper.concat tag(:div, class: 'panel-body').html_safe
  block.call
  @helper.concat '</div>'.html_safe
end

其中@helper 是PanelHelper 初始化程序中作为来自主帮助程序模块ApplicationHelper 的self 传递的。此外，我在调用 p.body 时删除了 =，因为我们正在直接写入缓冲区。

Answer 1

<%= p.body do %>
  <p>Test</p>
<% end %>

所以，<p>Test</p> 出现了两次（有点），因为第一个实例是在 ApplicationModule 帮助器的 body 代码内调用 yield（或者在您的情况下为 block.call）的结果。根据this railscast，视图中的块与普通块的工作方式不同，因为 yield auto 将块调用的结果插入到 HTML 中（我仍然不确定为什么，但我正在尝试弄清楚）。

但这可以通过将nil 放在body 函数的末尾来证明：

def body(&block)
  content_tag(:div, block.call, class: 'panel-body')
  nil
end

将导致<p>Test</p> 被放置在代码中（block.call 的结果，而不是 content_tag 调用的结果）。

但是，将 block.call 更改为 "<p>Test</p>"

def body(&block)
  content_tag(:div, "<p>Test</p>", class: 'panel-body')
  nil
end

将导致您的 HTML 中没有任何内容。因此，视图助手中的yield/block.call 会产生一些意想不到的后果。所以这就是为什么你看到<p>Test</p> 两次的原因。

解决方案，您可以按照@PrakashMurthy 的建议进行操作，然后像这样将块传递给 content_tag

def body(&block)
  content_tag :div, class: 'panel-body' do
    block.call
  end
end

这是可行的，因为您的助手没有屈服于该块，而是将其传递给与yield 将代码插入模板的行为不同的方法。 您还可以使用capture 方法，该方法获取块的结果并将其作为字符串返回。

content_tag(:div, capture(&block), class: 'panel-body')

Answer 2

使用

<% p.body do %>
  <p>Test</p>
<% end %> 

即<% p.body do %> 而不是 <%= p.body %> 会抑制视图中的第一个 <p>Test</p>。

编辑：

def body(&block)
  content_tag :div, class: 'panel-body' do
    block.call
  end
end

<%= p.body do %>
  <p>Test</p>
<% end %> 

会给出你想要的输出。