Question

我正在开发一个Rails应用程序，该应用程序在head application.html.erb中使用以下内容呈现JavaScript：

<head>
  ...
  <script><%= render 'certified_mail/mail_list_loader.js' %></script>
</head>

使用上面代码呈现的JS部分进行AJAX调用，其参数通过控制器中的实例变量传递：

# _mail_list_loader.js.erb
document.addEventListener("turbolinks:load", function() {
  $.ajax({
    url: '/certified_mail/mail_list',
    type: 'get',
    data: {
      page: <%= @page %>,
      rut: <%= @rut || 'null' %>,
      from: <%= @from || 'null' %>,
      to: <%= @to || 'null' %>,
      ids: <%= @outdated_message_ids.to_json.html_safe %>
    }
  });
});

由于Turbolinks合并了后续请求中的head内容，因此每次AJAX调用的参数发生更改时，我都会在script中加载额外的head，这会导致额外的不必要的内容请求，如下图所示：

我如何告诉Turbolinks在合并过程中不考虑特定的脚本，以便我可以避免这些额外的电话？

Answer 1

我如何告诉Turbolinks在合并过程中不考虑特定的脚本，以便我可以避免这些额外的电话？

我担心我不认为有一种很好的方法可以做你要问的事情。如果实例变量已更改，则需要附加并评估脚本。

我建议使用其他方法，例如the solution I proposed in your previous question。

我认为你所追求的是拆除事件监听器，并在脚本执行后删除它。我不推荐这个，因为它是非常规的，有点片状，但它是可能的。

<script id="mail-list-loader">
  // Remove the previously added event listener
  document.removeEventListener('turbolinks:load', mailListLoader)

  // Redefine the event handler and bind to the load event
  var mailListLoader = function() {
    $.ajax({
      url: '/certified_mail/mail_list',
      type: 'get',
      data: {
        page: <%= @page %>,
        rut: <%= @rut || 'null' %>,
        from: <%= @from || 'null' %>,
        to: <%= @to || 'null' %>,
        ids: <%= @outdated_message_ids.to_json.html_safe %>
      }
    })
  }
  document.addEventListener('turbolinks:load', mailListLoader)

  // Remove the script to prevent build up in the head
  document.head.removeChild(document.getElementById('mail-list-loader'))
</script>

正如我所说，我不会推荐这一点，因为你可能最终会遇到更多令人头疼的问题，但它可以证明有效需要发生的事情。

希望有所帮助。

Answer 2

如何将script标签放在<body>标签内？就我而言，我希望某些样式表<link>标记仅应用于页面，而在页面更改时不与另一页面<link>标记合并。因此，我最终移动了不需要在<body>内合并的那些标签。

在Turbolinks

2 个答案: