在Rails中嵌入一小段JavaScript的最佳方法是什么？

Question

这是我的application.html：

<body>
  <div class="bg-cover">
    <div class="background">
      <%= render 'layouts/header' %>
      <main>
        <% flash.each do |message_type, message| %>
          <div class="alert alert-<%= message_type %>">
            <script>Materialize.toast("<%= message %>", 5000, 'rounded <%= message_type %>', 'success')();</script>
          </div>
        <% end %>
        <%= yield %>
      </main><!--End of main-->
      <%= render 'layouts/footer' %>
    </div><!-- end of container main-->
  </div>
</body>
</html>

我不知道是否将此脚本直接嵌入到application.html中是最佳实践。 有人可以建议最佳做法是什么吗？ 谢谢！！

Answer 1

您可以通过这种方式做到这一点，但我将它分为部分内容：

layouts/_flash_message.html.erb

<% flash.each do |message_type, message| %>
  <div class="alert alert-<%= message_type %>">
    <script>Materialize.toast("<%= message %>", 5000, 'rounded <%= message_type %>', 'success')();</script>
  </div>

并像这样包含它：

<body>
  <div class="bg-cover">
    <div class="background">
      <%= render 'layouts/header' %>
      <main>
        <%= render "layouts/flash_message" %>
        <% end %>
        <%= yield %>
      </main><!--End of main-->
      <%= render 'layouts/footer' %>
    </div><!-- end of container main-->
  </div>
</body>
</html>

Answer 2

实际上，这样做是一种不好的做法，您应该改而使用不引人注意的javascript做法（ http://blog.teamtreehouse.com/unobtrusive-javascript-important ），所有javascript代码都应以Javascript文件而不是视图内部编写。

要在您的情况下实现此目的，可以在有消息的情况下添加带有特定类的div，并通过data属性在javascript中传递所需的任何参数

<div class="show-material-message" data-message="<%= message %>"></div>

然后在您的javascript application.js ，例如侦听此div并在需要时触发Materialize.toast

$( document ).ready(function() {
  $(".show-material-message").each(function(){
    Materialize.toast($(this).data('message'), 5000....
  });
});

在Rails中嵌入一小段JavaScript的最佳方法是什么？

问题描述

2 个解决方案

解决方案1
2 2015-08-11 17:29:34

解决方案2
0 已采纳 2015-08-11 17:49:23

在Rails中嵌入一小段JavaScript的最佳方法是什么？

问题描述

2 个解决方案

解决方案1 2 2015-08-11 17:29:34

解决方案2 0 已采纳 2015-08-11 17:49:23

解决方案1
2 2015-08-11 17:29:34

解决方案2
0 已采纳 2015-08-11 17:49:23