在 Rails 5 中，我应该将 javascript_include_tag 放在哪里？答案

【问题标题】：In Rails 5 where should I put my javascript_include_tag?在 Rails 5 中，我应该将 javascript_include_tag 放在哪里？
【发布时间】：2019-05-17 11:42:47
【问题描述】：

我的 application.html.erb 文件中有以下标签：<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

最初它位于head 部分，我认为这是 Rails 5.2 的默认设置。问题在于它不会在我的 assets/javascripts 文件夹中加载 JS 文件。有人建议我将标签移动到<%= yield %> 部分之后但仍在body 内的某个位置。这工作正常，该文件夹中的 JS 加载正常。现在的问题是我正在使用leaflet-rails gem，而当javascript_include_tag 在body 中时，地图将无法加载......我能做些什么来让这两个东西都起作用吗？

我的资产/javascripts/locations.js

var currentLocation = document.getElementById('coordinatesStore'); 
document.querySelector('.add-button').addEventListener('click', () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(({ coords: { latitude, longitude }}) => {
    currentLocation.value = latitude + ", " + longitude;
    });
  } else {
    currentLocation.value = "Geolocation is not supported by this browser.";
  }
});

【问题讨论】：

"这个问题是它不会在我的 assets/javascripts 文件夹中加载 JS 文件。" - 你是什么意思？如果资产是从application.js 引用的，则应该加载它。
@SergioTulentsev 我在 assets/javascripts 中有一个名为 location.js 的文件，除非我将此 js 包含标签放在 yield 标签之后，否则它不会加载。有什么我遗漏的东西可以使它工作并且仍然能够将它保留在head 标签中吗？我最初的帖子是here
哦，但它确实加载了。您可以通过在此处插入一些 console.log 语句来检查。
尝试在 assets 下的 application.js 文件中更改您的 leaflet.js 文件的顺序。您的 location.js 文件可能会在 leaflet.js 文件之前加载。
@SergioTulentsev 不，它在头部时不会加载。我需要在某个地方使用它吗？

标签： ruby-on-rails ruby-on-rails-5

【解决方案1】：

这里的问题是您试图将事件处理程序附加到尚不存在的元素。解决方案是标准的：加载头部代码，但推迟运行直到页面加载。

// wrap your code in a function, so that it can be executed later
function attachLocationClickHandlers() {
  Array.prototype.forEach.call(
    document.querySelectorAll('.add-button'),
    (button, i) => {
      // do something on click
    }
  );
}

document.addEventListener("turbolinks:load", function() {
  attachLocationClickHandlers()
})

(或类似的东西。我不懂javascript)

【讨论】：

是的，我也不懂 JavaScript ;) 这不起作用。 Uncaught ReferenceError: getLocation is not defined at HTMLButtonElement
@Steve：嗯，你没有保留getLocation的定义吗？应该在attachLocationClickHandlers 之外（以防不明显）。
我不知道您所说的“保留 getLocation 的定义”是什么意思。我只是按照你写的方式使用了你的代码。
@Steve：不过不是我写的。我重新排列了您其他帖子中的部分您的代码。省略与答案无关的部分。
啊，那不再是我正在使用的代码了——它现在略有不同。对不起。我已将其添加到问题中。