带有嵌套 content_tag 的 rails 3 link_to 以创建带有嵌套跨度的 <a href - 如何？答案

【问题标题】：rails 3 link_to with nested content_tag to create <a href with nested span - how to?带有嵌套 content_tag 的 rails 3 link_to 以创建带有嵌套跨度的 <a href - 如何？
【发布时间】：2012-03-27 14:53:17
【问题描述】：

您好，我有一个菜鸟问题，我想创建以下 HTML 结果：

<a href="/controller/action" class="button-big layer">TEXT<span class="arrow-big"></span></a>

在上面的 HTML 中，我希望通过 css 在图像中设置具有跨度类的文本。

当我尝试以下实现时，结果只反映了所需实现的一部分：

<%= link_to "TEXT", controller_path, :class => "button-big layer" %>

结果：

<a href="/controller/action" class="button-big layer">TEXT</a>

和

<%= link_to(content_tag(:span, "", :class => "arrow-big"), controller_path, :class => "button-big layer") %>

结果：

<a href="/controller/action" class="button-big layer"><span class="arrow-big"></span></a>

有谁知道如何完成？

【问题讨论】：

标签： ruby-on-rails-3 href link-to content-tag

【解决方案1】：

只需将您的文本与“跨度”连接起来：

<%= link_to(("TEXT" + content_tag(:span, "", :class => "arrow-big")).html_safe,
             controller_path,
             :class => "button-big layer") %>

您需要 .html_safe 围绕连接，因为 + 运算符将转义 content_tag 的 HTML。

【讨论】：

嗨，做得好，这正是我正在寻找的。无需更改 css 即可按预期工作，感谢您的解决方案 :-)
这很好用，我根据需要颠倒了 text 和 content_tag，但这正是我想要的。

【解决方案2】：

您还可以使用 link_to helper 的替代语法来嵌套标签

<%= link_to controller_path, :class=> "button-big layer" do %>
  Text
  <%= content_tag(:span, "", :class => "arrow_big" %>
<% end %>

【讨论】：

您好，感谢您的解决方案，它的工作原理与另一个有一点“差距”的解决方案一样好。由于插入了中断，因此必须调整跨度标记插入的“图像”的 css 样式。但这没什么大不了的，干得好！
令人惊讶的是，似乎没有人谈论 link_to 和 content_tag 的阻止选项。好像没有人需要嵌套，或者没有人使用haml，嵌套内容非常繁琐。很好的答案，很高兴知道link_to 和content_tag 可以做到这一点
一直在为 yonks 寻找这个。没有从文档中理解 link_to 可以运行阻止选项

【解决方案3】：

这是您可以在没有 content_tag 的情况下使用的另一种方式。不是最干净的，但它有效！

<%= link_to '<span class="arrow_big"></span>'.html_safe, controller_path, class: "button-big layer" %>

【讨论】：

【解决方案4】：

阅读您的问题，我确实解决了我的问题。我建议另一种方式来回答你的问题。

您可以创建一个辅助方法来制作您需要的这种链接。应该是这样的

def link_with_text_and_span(href, text, span_options= {}, link_options = {})
    span_tag = content_tag(:span, span_options[:content] || '', :class => span_options[:class] || '')
    link_to(span_tag, href, :class => link_options[:class] || '')
  end

这样做的好处是您的视图会更清晰。然后你可以在你的视图中调用这个辅助方法

  <%= link_with_text_and_span("/controller/action", "TEXT", {class: 'arrow-big'}, class: button-big) %>

PS：此代码肯定可以改进，如果其他用户愿意，请这样做。

【讨论】：