Rails 6 / Turbolinks 5：turbolinks:load 多次触发答案

【问题标题】：Rails 6 / Turbolinks 5 : turbolinks:load fires multiple timesRails 6 / Turbolinks 5：turbolinks:load 多次触发
【发布时间】：2021-10-21 09:15:36
【问题描述】：

我正在开发一个相当新的 Rails 6 应用程序，但我遇到了 Select2 和 Turbolinks 的问题。我希望主页上有一个 Select2 字段，允许选择用户并访问他的个人资料。

js 文件如下所示：

document.addEventListener('turbolinks:load',function(e) {
  console.log('fired', e.type);

  $('#home-search-field').select2({
    selectionCssClass : 'home-select2-input'
  });

  $('#home-search-field').on('select2:select', function (e) {
    var user_path = e.params.data.id;
    Turbolinks.visit(user_path);
  });
});

一开始可以，但是当我回到主页时，现在有 2 个搜索字段。如果我再次点击主页链接，它是 4。

turbolinks:load 事件被触发多次，并且会叠加。我点击了主页链接，直到我一次触发了 28 次。

显然，每次我加载此页面时它都会添加 2 个事件？

我不知道。

我尝试了很多解决方案来删除 Turbolinks 工作流程中某些点的字段：

document.addEventListener('turbolinks:before-cache', function () {
  $('.select2-container').remove();
});

或

document.addEventListener('turbolinks:before-visit', function () {
  $('#home-search-field').select2('destroy');
});

这些都不起作用，但我终于找到了停止生成多个字段的技巧：在调用 select2 之前添加这一行。

if($('#home-search-field').first().data('select2-id')) { return; }

所以我现在只有一个字段，但我还有几十个无用的事件。不可能是健康的。有人知道发生了什么吗？

我怀疑我的js文件结构，因为我是第一次使用新的Webpack样式，但是没有太多，看起来很标准。

【问题讨论】：

标签： javascript jquery ruby-on-rails jquery-select2 turbolinks

【解决方案1】：

已修复：pb 与我的 js 包一起加载。

我是从这里出发的：

<%= javascript_pack_tag 'home' %>

到这里：

<%= javascript_pack_tag 'home', 'data-turbolinks-eval': false, defer: true %>

而且好像解决了pb。

我终于在 Turbolinks 自述文件中找到了：

如果您不希望 Turbolinks 在渲染后评估元素，请使用 data-turbolinks-eval="false" 注释元素。请注意，此注释不会阻止您的浏览器在初始页面加载时评估脚本。

turbolinks:load 没有被多次触发：我对该事件的监听器被添加了多次。

【讨论】：

【解决方案2】：

也可以只添加

<script data-turbolinks-eval="false">
 ...

</script>

到您不希望它评估的脚本标签

【讨论】：