在帮助程序中使用 html 时出现 image_tag 问题答案

【问题标题】：issue with image_tag when using html in helper在帮助程序中使用 html 时出现 image_tag 问题
【发布时间】：2017-11-16 16:39:46
【问题描述】：

我有一种情况，我需要在现有的 html 块中插入部分 html，所以我首先尝试创建这个 html，因为它将在许多地方使用，因此我使用帮助器来创建这个片段但是 image_tag 会抛出错误，如果直接在视图中使用它可以完美地工作

我的助手代码

def create_banner_html_helper(banner)

    if banner.logo.present?
      return "<div class='m3-news_wrap m3-mdcast-banner slide'>
    <a href='" + banner.link_url + "' target=_'blank'>
    <div class='m3-article'>

<div class='m3-section m3-img_holder'>"
      image_tag banner.logo(:small)
      "</div>
    <div class='m3-section m3-desc'>
         <h3 class='m3-title'>" + banner.title+ "</h3>
                    <p>" + banner.subtitle + "</p>
         <a href='" + banner.link_url + "' target='_blank'>" + banner.link_text + "</a>
                  </div>
                </div>
              </a>".html_safe

    end

    return "<div class='m3-news_wrap m3-mdcast-banner slide'>
    <a href='" + banner.link_url + "' target=_'blank'>
    <div class='m3-article'>

    <div class='m3-section m3-desc'>
         <h3 class='m3-title'>" + banner.title+ "</h3>
                    <p>" + banner.subtitle + "</p>
         <a href='" + banner.link_url + "' target='_blank'>" + banner.link_text + "</a>
                  </div>
                </div>
              </a>".html_safe
  end

传递的横幅是一个 ActiveRecord 对象。

我真的不知道是什么问题，所以任何帮助将不胜感激

【问题讨论】：

它抛出的错误是什么
现在它只在 image_tag div 之后打印代码的后半部分。我没有收到错误，但它根本没有显示顶部。但它正在显示HTML 原样而不将其呈现为 HTML

标签： ruby-on-rails

【解决方案1】：

我猜当你调用 image_tag 时，它本质上是在调用 return，这将结束你方法其余部分的执行（因此它停止在那里输出）。

我建议将所有 html 从您的助手中移到部分中。将您需要的任何变量作为本地变量传递。这将有助于提高代码的可读性和可维护性。

部分替换你的助手（假设是views/partials/_banner_logo.html.erb）：

<div class='m3-news_wrap m3-mdcast-banner slide'>
  <a href='<%= banner.link_url %>' target=_'blank'>
    <div class='m3-article'>
      <% if banner.logo.present? %>
        <div class='m3-section m3-img_holder'>
          <%= image_tag banner.logo(:small) %>
        </div>
      <% end %>
      <div class='m3-section m3-desc'>
        <h3 class='m3-title'><%= banner.title %></h3>
        <p><%= banner.subtitle %></p>
        <a href='<%= banner.link_url %>' target='_blank'><%= banner.link_text %></a>
      </div>
    </div>
  </a>
</div>

要使用它，请从您需要渲染的任何视图/模板调用 render 并传递横幅：

<%= render 'partials/banner_logo', banner: your_banner_variable %>

【讨论】：

【解决方案2】：

您必须concat 和/或capture 元素，否则只会返回最后一部分。

这里有一个很好的链接：https://thepugautomatic.com/2013/06/helpers/ 或者这里的官方文档：https://apidock.com/rails/ActionView/Helpers/TextHelper/concat

链接文章中使用了一个捕获块，其代码如下：

module MyHelper
  def widget
    capture do
      concat link_to("Hello", hello_path)
      concat " "
      concat link_to("Bye", goodbye_path)
    end
  end
end

说明：

您可以使用捕获助手解决此问题。就是这样 content_tag 在内部使用：capture，名副其实，捕获内容，因此它不会直接附加到页面上。相反，它已建成 up 作为一个单独的字符串，供您的自定义助手返回（或让其方式）

我会像这样包装你的代码 - 连接字符串元素和图像标签，返回整体。

编辑：N.B.我认为image_tag 两侧的快速+ 可以解决这个问题，也许会容易得多:)

也许像这样？

    if banner.logo.present?
      return "<div class='m3-news_wrap m3-mdcast-banner slide'>
                <a href='" + banner.link_url + "' target=_'blank'>
                  <div class='m3-article'>

                    <div class='m3-section m3-img_holder'>" +
                      image_tag(banner.logo(:small)) +
                    "</div>
                    <div class='m3-section m3-desc'>
                      <h3 class='m3-title'>" + banner.title + "</h3>
                      <p>" + banner.subtitle + "</p>
                      <a href='" + banner.link_url + "' target='_blank'>" + banner.link_text + "</a>
                    </div>
                 </div>
               </a>
             </div>".html_safe

    end

（仅供参考，我认为您在那里错过了最后的结束 div。）

【讨论】：

无法让它工作..如果你能为我编写这个帮助代码会非常有帮助..只要 if 部分就可以了，因为我将自己管理 else 部分..提前谢谢你
我已经用我的更新版本更新了我的答案，又名+s。对此进行一些思考 - 这会不会更好地坐在局部，在需要的地方通过横幅进行渲染？ IE。 <%= render 'banner', banner: banner %>（@DivXZero 的回答与我输入的相同。）
实际上，这个 html 将位于其他 2 个 html 块之间，然后将显示这些块。所以我也很困惑什么是最好的方法。我是新手，所以不太确定..您对这种情况有何看法？
代码出错.. /Users/dhavalchheda/Projects/M3India_App/m3india_app/app/helpers/frontend/contents_helper.rb:14: 语法错误，意外的 tIDENTIFIER，期待关键字_do 或 '{'或 '(' image_tag banner.logo(:small) + ^ /Users/dhavalchheda/Projects/M3India_App/m3india_app/app/helpers/frontend/contents_helper.rb:32: 语法错误，意外的 tIDENTIFIER，期待 keyword_do 或 '{' 或'(' image_tag banner.logo(:small) + ^
嘿 - 我会编辑该评论以删除错误路径中的个人信息 :) 这听起来像是那里某处的错字/代码问题。我建议切换以将其包含在部分中（（此处的文档：guides.rubyonrails.org/…）。我现在必须冲刺 - 但希望这会有所帮助，并且有更多的时间你会得到这个工作！跨度>

【解决方案3】：

尝试用

调用你的方法

<%= create_banner_html_helper(banner).html_safe %>

它应该可以解决您直接将其打印为字符串而不是 html 的问题

【讨论】：

【解决方案4】：

感谢大家的努力，但我想保持我的视图文件干净，因此我把这段代码放在帮助程序中..

这是我正在使用的代码，将来可能会对某人有所帮助..

banner_logo_snippet = if self.logo.present?
        "<div class='m3-section m3-img_holder'><img src='#{self.logo(:small)}' /></div>"
      else
        ''
      end
      banner_snippet = <<"END"
  <div class="m3-news_wrap m3-mdcast-self slide" style="border: 1px solid ##{self.border_color}; background-color: ##{self.background_color};">
  <a href="#{self.link_url}" target="_blank">
    <div class="m3-article">
      #{banner_logo_snippet}
      <div class='m3-section m3-desc'>
        <h3 class='m3-title'>#{self.title}</h3>
        <p>#{self.subtitle}</p>
        <a href="#{self.link_url}" target="_blank">#{self.link_text}</a>
      </div>
    </div>
  </a>
</div>
END

感谢大家抽出宝贵的时间并为社区欢呼。. 保重并快乐编码

【讨论】：