Question

我正在为页面编写一些探索性javascript。它包括以下行：

dashboard_settings.addEventListener('ajax:complete', function(){
  ...

我已将脚本放置在结束body标签之前。

我注意到，当我导航到该页面时，JS可以按预期工作，并且控制台中没有错误消息。但是，当我离开页面导航时，JS控制台中会显示一条错误消息：

Uncaught TypeError: Cannot read property 'addEventListener' of null

我知道这与Turbolink有关。但是，我不确定如何在不关闭Turbolink的情况下避免这种情况。

我可以指定脚本只为一页加载吗？

我尝试了以下操作但未成功：

<%= yield :page_scripts %>
<% content_for :page_scripts do %>
    <script>
      document.addEventListener('turbolinks:load', function(){
    ...

Answer 1

仅当元素存在时，您才可以添加侦听器。

if (dashboard_settings)
  dashboard_settings.addEventListener('ajax:complete', function(){...})

或者，如果您不想仅在特定页面上添加它，则可以在布局上添加yield语句，仅将其内容设置在所需页面上

#layout
<html>
  <body>
    ...
  </body>
  <%= yield(:after_body) -%>
</html>


#your view
<%= content_for :after_body do -%>
  <script>
    document.addEventListener('turbolinks:load', function(){
      dashboard_settings.addEventListener('ajax:complete', function(){...})
    })
  </script>
<%- end -%>

Rails 5.2：使用Turbolinks时如何使用页面特定的JS脚本？

1 个答案: