实现css不渲染吐司

Question

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

应用程序/视图/布局/ 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变量＆＃34; msg＆＃34;哪个不存在。您应该可以在浏览器的控制台中验证这一点。

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

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

确保你也引用变量。

Answer 2

我认为问题在于您在页面＆amp;之前调用Materialise.toast（）。 javascript文件已完成加载。解决此问题的最佳方法是使用

打包您的javascript调用

  

$（document）.ready（function（）{你的代码在这里}}

试试这个

  

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

Answer 3

这对我有用......

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