导轨到ASTR:添加一个关闭按钮

Question

我正在使用Rails-toastr Gem（Rails 5.0.0.1），我想在烤面包机上添加一个关闭按钮。

我遵循说明，并在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

如果您需要特定页面的其他选项，请将选项放入您的应用程序。

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选项的完整列表。只需运行演示，就会有一个输出文件显示您选择的选项。

Answer 2

我不知道，但看起来像codeven/toastr过时，不再维护。

我遇到了与您相同的问题，但是我使用了另一个目前功能齐全的Toastr Gem解决了此问题，并且可以"查看" toastr选项。我希望它能帮助您或其他任何会面对此类问题的人。

Answer 3

永远不要使用这种方法，使用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 4

多亏了这个Upwork Freelancer，我们购买了类似于Beangie's的解决方案。我们在app/assets/javascripts/helpers/中添加了一个toastr_override.js文件，其中包括：

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