17

以下代码使用 Bootstrap 3.0 显示 Rails flash 消息：

<%# Rails flash messages styled for Twitter Bootstrap 3.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "danger" %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

代码来自文章Bootstrap 和 Rails。

Foundation 和 Rails文章中的类似代码可以与 Foundation 一起使用：

<%# Rails flash messages styled for Zurb Foundation 5.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div data-alert class="alert-box round <%= name == :notice ? "success" : "alert" %>">
      <%= content_tag :div, msg %>
      <a href="#" class="close">&times;</a>
    </div>
  <% end %>
<% end %>

对于 Bootstrap 或 Foundation，当我将应用程序从 Rails 4.0 升级到 Rails 4.1 时，所有闪烁消息都显示为红色，甚至应该显示为绿色的“通知”消息。

Rails 4.1 中有哪些改变来破坏这段代码？

4

2 回答 2

33

找到我自己的答案...

我已经修改了我的Rails 和 Bootstrap教程，并相应地更新了rails-bootstrap示例应用程序。

Rails flash 消息散列包含一个键（“名称”）和一个值（“消息”）。

在 Rails 4.0 下，关键是 Symbol。

在 Rails 4.1 中，键是字符串。

使用 Bootstrap 或 Foundation 显示 Flash 消息的样式需要解析密钥以确定它是警报还是通知。

在 Rails 4.1 中，名称是字符串，并且与上面的代码不匹配，而是使用 alert-danger 类以红色设置样式。

为了解决这个问题，使用 Bootstrap 显示 flash 消息的代码应该更改以适应 Rails 4.0 和 Rails 4.1：

<div class="alert alert-<%= name.to_s == 'notice' ? 'success' : 'danger' %>">

对于 Foundation，代码应更改为：

<div data-alert class="alert-box round <%= name.to_s == 'notice' ? 'success' : 'alert' %>">
于 2014-03-01T03:29:55.637 回答
1

我尝试了这个答案，但如果不是“通知”，它会将所有内容都标记为危险。我最终创建了一个帮助类来保持我的其他 Flash 消息不变，并且只更改返回旧的 bo​​ostrap 'notice' 和 'alert' 类的设计。

<div class="container">
  <% flash.each do |name, msg| %>
    <% if msg.is_a?(String) %>
      <div class="alert alert-<%= flash_class_name(name) %>" role="alert">
        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
        </button>
        <%= content_tag :div, msg, :id => "flash_#{name}" %>
      </div>
    <% end %>
  <% end %>
</div>

和一个辅助方法

def flash_class_name(name)
    case name
    when 'notice' then 'success'
    when 'alert'  then 'danger'
    else name
    end
end
于 2014-10-12T23:52:23.477 回答