17

次のコードは、Bootstrap 3.0 を使用して Rails フラッシュ メッセージを表示します。

<%# 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 and Railsからのものです。

記事Foundation and 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 フラッシュ メッセージ ハッシュには、キー (「名前」) と値 (「メッセージ」) が含まれます。

Rails 4.0 では、キーは Symbol です。

Rails 4.1 では、キーは文字列です。

Bootstrap または Foundation で表示するフラッシュ メッセージのスタイルを設定するには、キーを解析して、それがアラートか通知かを判断する必要があります。

Rails 4.1 では、名前は文字列であり、上記のコードでは一致せず、代わりに alert-danger クラスで赤でスタイル設定されます。

これを修正するには、Bootstrap でフラッシュ メッセージを表示するコードを、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

私はこの答えを試しましたが、「通知」でなければ、すべてを危険としてマークしていました。私はヘルパークラスを作成して、他のフラッシュメッセージを変更せずに、古いブーストラップの「通知」および「アラート」クラスを返すデバイスのみを変更しました。

<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 に答える