私はまだRails 4デモサイトで作業していますが、奇妙なことがわかります。コントローラーには次のような行があります。
format.html { redirect_to @widget, notice: 'Widget was successfully created.' }
これにより、リダイレクトされたページにフラッシュメッセージが表示されます。ただし、メッセージdivに添付されたcssクラスは、有効なBootstrap alert alert-notice
のようなアラートクラスではなくalert-info
]です。
このフラッシュのクラスはどこに設定されていますか?どのようにカスタマイズしますか?
また、ajax経由でレコードを削除する場合、コアフラッシュコンテナにアクセスしてjs経由でメッセージを表示する方法はありますか、またはajaxリクエストのためだけに独自のフラッシュメッセージdivを表示/非表示する必要がありますか?
編集:私のマイケルハートルはlayouts/application.html.erb
に触発されました:
<div class="container">
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
</div>
ありがとう!
編集2:
おそらく、元の質問では十分に明確ではありませんでした。この場合、クラスがフラッシュオブジェクトにどのように設定されているかを正確に理解しています。 notice:
ブロックでformat.html
を使用およびカスタマイズする方法を学ぶことに興味があります。この通知を介してクラスを渡す方法があるはずです?または、これはコアではありませんRails物事を行う方法?
application.html.erb
では、flash
メッセージを表示します。
以下のようにそのコードを更新します
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, class: "alert alert-info" %>
<% end %>
class
オプションで、フラッシュメッセージに適用するクラスを追加できます。
[〜#〜] edit [〜#〜]
クラスは、コード内のalert alert-notice
により、alert alert-<%= key %>
としてセットアップされます。 redirect_to @widget, notice: 'Widget was successfully created.
を呼び出すとき
フラッシュメッセージがflash
ハッシュに追加され、キーはnotice
、値はWidget was successfully created.
になります。つまり、
flash[:notice] = "Widget was successfully created."
編集#2
format.html { redirect_to @widget, notice: 'Widget was successfully created.' }
notice: 'Widget was successfully created.'
は、redirect_to
メソッドに渡される引数です。このメソッドのflash
ハッシュに追加されます。
これを追加
class ApplicationController
add_flash_types :success, :warning, :danger, :info
end
そして、あなたはあなたのコントローラーでこれを行うことができます
format.html { redirect_to @widget, success: 'Widget was successfully created.' }
レイアウトでこれを行った場合
<div class="container">
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
</div>
@Sachin Mourが示したようにApplicationController
を台無しにしたくない場合は、それに応じて追加のCSSのクラスをいくつか追加するだけです。
app/assets/stylesheets/custom.scss
:
/*flash*/
.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
text-align: left;
}
.alert-alert {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
text-align: left;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
text-align: left;
}
.alert-notice {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
text-align: left;
}
ステップバイステップのチュートリアル、deviseとbootstrapでフラッシュメッセージにアプローチする方法、あなたは見つけることができます here