Question

我有一种情况，我需要在现有的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

传递的

banner是一个ActiveRecord对象。

我真的不知道是什么问题所以任何帮助都会受到高度赞赏

Answer 1

您必须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，true为其名称，捕获内容因此不会直接附加到页面。相反，它是建立的作为单独的字符串，让您的自定义助手返回（或拥有它方式）

我将这样的代码包装起来 - 连接字符串元素和图片标记，返回整体。

编辑：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。）

Answer 2

我猜测当你调用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 'partials/banner_logo', banner: your_banner_variable %>

Answer 3

尝试使用

调用您的方法

<%= create_banner_html_helper(banner).html_safe %>

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

的问题

Answer 4

感谢大家的努力，但我想保持我的视图文件干净，因此我将这些代码放在帮手中..

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

<form>
    another text input<input type="text"><br>
    add title<input type="text" id="addTitle"><br>
    another text input<input type="text"><br>
    <input type="button" value="button"><br>
    <input type="submit" value="submit"><br>
  </form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<Script>
  $(function(){
  $("#addTitle").on('keyup', function(e){
        var keyCode = e.keyCode || e.which;
        if (keyCode == 13){
            console.log("ENTER PRESSED on input text");
        }
    });

  $('form').submit(function(e){
    e.preventDefault();
    if($(this).find('#addTitle').is(':focus') === false){
      doAjaxForm();
    }
  });

  function doAjaxForm(){
    console.log('do ajax form');
  }  

})
  </script>

感谢大家的时间和对社区的欢呼.. 保重和快乐编码

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

4 个答案: