在物化吐司中设计通知/警报的清洁方法答案

【问题标题】：Clean approach to devise notice/alerts in materialize toast在物化吐司中设计通知/警报的清洁方法
【发布时间】：2016-02-11 21:40:05
【问题描述】：

我在我的 rails 应用程序中使用 devise，作为标准，它带有 notice 和 alert 方法，用于呈现特定操作（例如用户登录）。

我也在使用Materialize CSS 框架，它们提供了一个非常干净的'Toast' style notification。这是使 notice 和 alert 与 Toast 一起使用的第一种方法。

<% if notice %>
  <script type="text/javascript">
    Materialize.toast('<%= notice %>', 4000)
  </script>
<% end %>
<% if alert %>
  <script type="text/javascript">
    Materialize.toast('<%= alert %>', 4000)
  </script>
<% end %>

谁能提供更清洁/更干燥的解决方案？感觉有点hacky。

【问题讨论】：

标签： javascript ruby-on-rails devise erb materialize

【解决方案1】：

这不是“最骇人听闻”的方式，但仍然有点干燥：

<% flash.each do |message_type, message| %>
    <%= javascript_tag "Materialize.toast('#{message}', 4000)" %>
<% end %>

【讨论】：

【解决方案2】：

我认为我不一定会认为这种技术“hacky”。这在我的生产应用中很适合我：

<% flash.each do |type, message| %>
  <% if type == "success" %>
    <div class="alert alert-success alert-dismissable" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <i class="icon-check"></i>
      <p><%= message.html_safe %></p>
    </div>
  <% elsif type == "toast" %>
    <script>
      $(function() {
        Materialize.toast("<%= message %>", 3000);
      });
    </script>
  <% else %>
    <div class="alert alert-danger alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <i class="icon-notice"></i>
      <%= message.html_safe %>
    </div>
  <% end %>
<% end %>

这里只是我的意见，但我认为这没有什么问题。

底线是我认为除了以这种方式使用闪光灯触发器 js 之外，没有其他方法可以开箱即用（但如果有人认为他们有更好的解决方案，我会全力以赴）。

【讨论】：

这可能会更好。警报 html 非常相似。真的应该抽象到一个 div 那里。
在以下内容中使用双引号：Materialize.toast('' ...否则如果消息中有撇号，则不会显示该消息
大家好@jpwynn。已更新。

【解决方案3】：

这是我的解决方案。主要代码只有两行。

<% unless flash.empty? %>
    <script>
      <% flash.each do |f| %>
      <% type=f[0].to_s.gsub('alert', 'red').gsub('warning', 'orange').gsub('success', 'green') %>
      Materialize.toast('<%= f[1] %>', 4000, '<%= type %>')
      <% end %>
    </script>
<% end %>

【讨论】：

【解决方案4】：

您可以将代码分成两部分。首先，将flash消息传递给erb中的js。其次，在脚本中触发 toast。看看https://github.com/leonid-shevtsov/unobtrusive_flash

【讨论】：