不能在带有语义 UI 的 Rails 4.2 中使用“link_to”或“button_to”答案

【问题标题】：Cannot use "link_to" or "button_to" in Rails 4.2 with Semantic-UI不能在带有语义 UI 的 Rails 4.2 中使用“link_to”或“button_to”
【发布时间】：2015-08-22 06:55:12
【问题描述】：

我正在使用 Semantic-UI 来设计我的 Rails 应用程序设计。我创建了一个卡片布局，该卡片底部附有一个按钮。但是当我尝试在底部附加按钮中的文本中添加 link_to 或 button_to 时，一切都会被破坏。

HTML + Rails 4.2 代码编写：

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <%= image_tag("white-image.png") %>
            </div>
            <div class="ui bottom attached button">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span><%= link_to 'Deploy', controller: 'apps', action: 'show'%>

            </div>
        </a>
    </div>

输出：

必须是这样的：

正常的 HTML 和 CSS 可以工作，但是当我尝试使用 Rails4.2 帮助程序（如“link_to”或“button_to”）时，一切都会出错。有什么方法可以让我使用 Rails 助手使整个卡片布局成为可点击的。

生成的 HTML 代码：

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <img src="/assets/white-image-d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf.png" alt="White image d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf">
            </div>
            </a><div class="ui bottom attached button"><a class="red card">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span></a><a href="/apps/show">Delpoy</a>

            </div>

    </div>

使用 HTML 和 Semantic-UI 的简单输出

<link href="http://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="http://semantic-ui.com/dist/semantic.min.js"></script>
<div class="ui four cards">
  			<a class="red card">
    			<div class="image">
    				<img class="ui wireframe image" src="http://semantic-ui.com/images/wireframe/white-image.png">
    			</div>
    			<div class="ui bottom attached button">
      				<i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
      				
    			</div>
    		</a>
		</div>

【问题讨论】：

生成的 HTML 是什么样子的？请创建问题的演示。
您是否尝试过类似<%= link_to 'Deploy', controller: 'apps', action: 'show', {class: '<css-class>'}%> 的link_to 类选项，正如您所说的普通html 和css 可以工作。
使用普通的html和css我的意思是我没有使用link_to标签。
我也试过 {html code here}.html_safe 但同样的输出。让我试试你的建议。那我会通知你的
我尝试了您的建议，但没有任何反应。相同的输出正在渲染。

标签： html css ruby-on-rails semantic-ui ruby-on-rails-4.2

【解决方案1】：

link_to 和 button_to 都接受一个可用于在链接/按钮内插入任意内容的块。

<div class="ui four cards">
  <%= link_to({ controller: 'apps', action: 'show' }, { class: "red card" }) do %>
    <div class="image">
      <%= image_tag "white-image.png", class: "ui wireframe image" %>
    </div>
    <div class="ui bottom attached button">
      <i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
    </div>
  <% end %>
</div>

【讨论】：

太好了！！！你能告诉我“ui 线框图像”类的作用是什么吗？我在 Semantic-UI 网站上没有找到它。

【解决方案2】：

link_to 可以接受一个块，试试这个：

<div class="ui four cards">
    <%= link_to {controller: 'apps', action: 'show'}, {class: "red card"} do %>
        <div class="image">
            <%= image_tag("white-image.png") %>
        </div>
        <div class="ui bottom attached button">
            <i class="fa fa-cloud-upload"></i>
        <span class="little-space"></span>
            Deploy
        </div>
    <% end %>
</div>

【讨论】：