在实现 toast 中设计 notice/alerts 的简洁方法

Question

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

我也在用Materialize CSS framework and they provide a nice clean '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 %>

任何人都可以提供 cleaner/more DRY 解决方案吗？感觉有点hacky。

Answer 1

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

Answer 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（但如果有人认为他们有更好的解决方案，我会洗耳恭听）。

Answer 3

这可能不是 "hackyest" 的方式，但还是有点 DRYer:

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

Answer 4

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

<% 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 %>

在实现 toast 中设计 notice/alerts 的简洁方法

Clean approach to devise notice/alerts in materialize toast

javascript

ruby-on-rails

erb

devise

materialize