rails-toastr: 添加关闭按钮

Question

我正在使用 rails-toastr gem (Rails 5.0.0.1)，我想为烤面包机添加一个关闭按钮。

我关注 instructions 并在 application.html.erb 中添加了指向 toastr.css 和 toastr.js 的链接。然后我分别在 app/assets/stylesheets 和 app/assets/javascripts 下创建了两个文件，在后者中我添加了行：

toastr.options.closeButton = true;

但是烤面包机不启动。

我在 application_helper.rb 中有这个方法（我在 application.html.erb 中调用）：

def custom_bootstrap_flash
  flash_messages = []
  flash.each do |type, message|
    type = 'success' if type == 'notice'
    type = 'error'   if type == 'alert'
    text = "<script>toastr.#{type}('#{message}');</script>"
    flash_messages << text.html_safe if message
  end
  flash_messages.join("\n").html_safe
end

但是没有这两个资产，这工作正常（当然没有关闭按钮）。

有什么想法吗？

Answer 1

我不知道，但看起来 CodeSeven/toastr 已过时且不再维护。

我遇到了与您相同的问题，但我通过使用另一个 toastr gem 解决了这个问题，该 toastr gem 目前功能齐全并且可以 "see" toastr 选项。希望对您或其他遇到此类问题的人有所帮助。

Answer 2

永远不要使用这种方法，使用 html_safe 是一个安全问题，rubocop 会抱怨你的代码，即：

app/helpers/application_helper.rb:10:30: C: Rails/OutputSafety: Tagging a string as html safe may be a security risk.
      flash_messages << text.html_safe if message

而是按照以下步骤操作：

添加助手：

module FooHelper
  def toastr_flash_class(type)
    case type
    when "alert"
      "toastr.error"
    when "notice"
      "toastr.success"
    else
      "toastr.info"
    end
  end
end

创建部分，例如 _toaster.html.erb

<%= content_tag(:script) do %>
  <% flash.each do |type, message| %>
    <%= toastr_flash_class("#{type}") %>('<%= message %>')
  <% end %>
<% end %>

从您的布局或视图中调用您的部分：

<%= render 'layouts/shared/toastr' %>

Answer 3

将选项放入您的 application.js 文件，或者如果您需要特定页面的其他选项，则放入特定的 js/coffee 文件。

application.js

...
//= require toastr

toastr.options = {
  "closeButton": true,
  "debug": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

已找到 toastr 选项的完整列表 here。只需运行演示，就会有一个输出文件显示您选择的选项。

Answer 4

感谢this Upwork freelancer, we went for a solution similar to 。我们在 app/assets/javascripts/helpers/ 中添加了一个 toastr_override.js 文件，其中包含以下内容：

//= require toastr/toastr
toastr.options = Object.assign({}, toastr.options, {
    closeButton: true
});

rails-toastr: 添加关闭按钮

rails-toastr: add a close button

javascript

css

ruby-on-rails

toast

toastr