【问题标题】:How to set a css class based on content in rails如何根据rails中的内容设置css类
【发布时间】:2013-06-15 07:16:12
【问题描述】:

我对 Rails 和 Web 应用程序开发非常陌生,所以如果这是基本的东西,我很抱歉,

我的问题是我正在寻找一种在 rails 中根据对象的值设置 CSS 类的方法。

在我的 rails 应用程序中使用引导框架,我有一个表格,其中显示了一个订单列表,每个订单都有一个状态,它可以处于各种状态,例如:“已创建、进行中、异常”

根据订单所处的状态,我想使用 CSS 标签,例如 <span class="label label-warning>" 表示异常状态或 <span class="label label-success"> 表示已创建或进行中。

我在想也许在某个地方有一个辅助方法并从视图中调用它来解决它?不确定我是否错过了一些基本的东西,因为我确信这是每个​​应用程序中都会出现的东西?

orders\index.html.erb
<div>
<h1>Listing orders</h1>

<table>
  <thead>
    <tr>
      <th>Customer</th>
      <th>Order ID</th>
      <th>Order State</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody>
    <% @orders.each do |order| %>
      <tr>
        <td><%= order.customer.name %></td>
        <td><%= order.id %></td>
        <td> <span class="label label-warning><%= order.state %></span></td>
        <td><%= link_to 'Show', order %></td>
        <td><%= link_to 'Edit', edit_order_path(order) %></td>
        <td><%= link_to 'Destroy', order, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        <td><%= link_to 'Exception', exception_order_path(order), method: :post %>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

【问题讨论】:

  • 我有点困惑,你并没有真正以清楚地描述你需要什么的方式呈现你的信息。如果我没记错的话,一个简单的if/elsif 语句不能满足你的需要吗?
  • 您的第三个 td 元素在开始标记中缺少 &gt;

标签: css ruby-on-rails sass ruby-on-rails-4


【解决方案1】:

不确定这是否是您要查找的内容,但您可以执行以下操作:

content_tag(:td, '', :class => (@obj == 'x' ? 'something' : 'somethingElse'))

如果您的条件测试很复杂,是的,我会使用辅助方法。然后你可以这样做:

content_tag(:td, '', :class => name_of_helper_method(@obj))

helper 方法返回一个字符串,表示您要设置的类名。

编辑:这可能就是你要找的东西:

<td><span class="label <%= order.state == 'Created' ? 'label-success' : 'label-warning' %>"></span></td>

【讨论】:

  • 如果您尝试使用remote: true,如何在无需重新加载页面的情况下使其工作?
  • @gwho,我不太确定——自从我使用 data-remote 已经有一段时间了,而且我对所有神奇的选项都不熟悉。我想你会想要一些 JS(也许是切换类),这会挂钩到 ajax:success 事件。请参阅此处了解更多信息:edgeguides.rubyonrails.org/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-03-04
  • 1970-01-01
  • 2013-12-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多