Ruby on rails DOM完全加载后，如何让TurboLink运行函数？

document.addEventListener（'turbolinks:load'，（）=>{}）未按预期工作。Mapbox引发以下错误：
Uncaught错误：未找到容器“map”。
并且贴图仅在我重新加载页面后正确显示

下面是一些更好理解的代码

用于mapbox导入和设置的Javascript：

//app/javascript/plugins/init\u mapbox.js
从“mapbox gl”导入mapboxgl；
常量mapElement=document.getElementById（'map'）；
const buildMap=（）=>{
mapboxgl.accessToken=mapElement.dataset.mapboxApiKey；
返回新的mapboxgl.Map({
容器：“映射”，
风格：'mapbox://styles/mapbox/streets-v10'
});
};
常量addMarkersToMap=（映射，标记）=>{
markers.forEach（（marker）=>{
新的mapboxgl.Marker（）
.setLngLat（[marker.lng，marker.lat]）
.addTo（地图）；
});
};
常量fitMapToMarkers=（映射，标记）=>{
const bounds=new mapboxgl.LngLatBounds（）；
markers.forEach（marker=>bounds.extend（[marker.lng，marker.lat]）；
fitBounds（边界，{padding:70，maxZoom:15}）；
};
常量initMapbox=（）=>{
if（映射元素）{
const map=buildMap（）；
const markers=JSON.parse（mapElement.dataset.markers）；
控制台日志（标记）
addMarkersToMap（地图、标记）；
fitMapToMarkers（地图、标记）；
}
};
导出{initMapbox}；

在application.js中导入：

//app/javascript/packs/application.js
从“../plugins/init_mapbox”导入{initMapbox}；
[...]
document.addEventListener（'turbolinks:load'，（）=>{
initMapbox（）；
});

HTML：


[...]
[...]

我完全不知道这一点。有什么想法吗？任何人都可以这样做吗？
问题是导入文件时，您正在分配
mapElement
。而不是在DOM就绪或TurboLink执行页面访问时

如果您只是重写此代码，使您的函数将一个元素作为参数，而不是依赖外部范围内的变量，那么解决它就很简单了：

import mapboxgl from 'mapbox-gl';

const buildMap = (mapElement) => {
  mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
  return new mapboxgl.Map({
    container: mapElement,
    style: 'mapbox://styles/mapbox/streets-v10'
  });
};

const addMarkersToMap = (map, markers) => {
  markers.forEach((marker) => {
    new mapboxgl.Marker()
      .setLngLat([ marker.lng, marker.lat ])
      .addTo(map);
  });
};

const fitMapToMarkers = (map, markers) => {
  const bounds = new mapboxgl.LngLatBounds();
  markers.forEach(marker => bounds.extend([ marker.lng, marker.lat ]));
  map.fitBounds(bounds, { padding: 70, maxZoom: 15 });
};

const initMapbox = (mapElement) => {
  const map = buildMap(mapElement);
  const markers = JSON.parse(mapElement.dataset.markers);
  console.log(markers)
  addMarkersToMap(map, markers);
  fitMapToMarkers(map, markers);
};

然后在回调函数中查询DOM：

document.addEventListener('turbolinks:load', () => {
  const mapElement = document.getElementById('map');
  if (mapElement) {
    initMapbox(mapElement);
  }
});

此外，我不知道这是否是一个复制粘贴问题，但您的HTML在
中也缺少一个括号，请粘贴一些演示该问题的最小代码。这很有意义，而且现在可以完美地工作。万分感谢！