Materialise css 不渲染 toast

Question

我正在尝试使用 materialize.css 中的 toast 组件来呈现即显消息。为此我修改了我的布局，但我没有收到任何祝酒词。

app/view/layouts/application.html.slim

doctype html
html
  head
    title
      | A beautiful Site
    = stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css"
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = javascript_include_tag "//www.google.com/jsapi"
    = csrf_meta_tags
    meta[name="viewport" content="width=device-width, initial-scale=1"]
    = analytics_init unless Rails.env.test?
  body
    .row
      = render partial: "elements/navbar"
      - flash.each do |_key, msg|
        javascript:
          Materialize.toast(msg, 5000);
    .row
      .container.col.s10
        = yield
      .meta.col.s2
        = render partial: 'elements/ads'

Answer 1

您当前的代码正在尝试使用不存在的 Javascript 变量 "msg"。您应该能够在浏览器的控制台中验证这一点。

您需要使用 Rails 变量才能工作：

- flash.each do |_key, msg|
  javascript:
    Materialize.toast("#{msg}", 5000);

确保你也引用了变量。

Answer 2

我认为问题在于您在页面和 javascript 文件加载完成之前调用了 Materialize.toast()。解决这个问题的最好方法是用

包装你的 javascript 电话

$(document).ready(function(){ YOUR CODE GOES HERE })

试试这个

- flash.each do |name, msg| :javascript $(function(){Materialize.toast("#{msg}", 10000);});

Answer 3

这对我有用...

    - if flash.any?
      javascript:
        $(function(){Materialize.toast("#{notice}", 5000);});

Materialise css 不渲染 toast

Materialize css not rendering toast

css

ruby-on-rails

notice

materialize

app/view/layouts/application.html.slim