Turbolinks页面回退前进时组件重复初始化问题求助

这个问题我之前帮不少Rails开发者解决过，核心就是Turbolinks的页面缓存机制——当你点击回退/前进时，Turbolinks会恢复缓存的页面，同时再次触发turbolinks:load事件，导致你的初始化代码被重复执行，进而出现Croppie重复初始化报错、Select2选项翻倍的问题。下面给你几个实用的解决方案：

方案一：添加初始化标记，执行前检查 #

最简单直接的思路就是给需要初始化的元素加个“已初始化”的标记，每次触发turbolinks:load时先检查标记，只有未初始化过的元素才执行初始化逻辑。

$(document).on('turbolinks:load', function () {
  // 处理Croppie初始化
  const cropContainer = $('#your-crop-container'); // 替换成你的Croppie容器选择器
  if (!cropContainer.data('croppie-initialized')) {
    initFileCrop();
    // 标记为已初始化
    cropContainer.data('croppie-initialized', true);
  }

  // 处理Select2初始化
  const selectElement = $(select2); // 替换成你的选择器
  // Select2初始化后会给元素绑定data('select2')，直接检查这个即可
  if (!selectElement.data('select2')) {
    selectElement.select2({});
  }
});

方案二：缓存页面前清理已初始化实例 #

Turbolinks提供了turbolinks:before-cache事件，这个事件会在页面被缓存到Turbolinks仓库前触发。我们可以利用这个事件，提前销毁Croppie和Select2的实例，移除相关绑定，这样下次恢复页面时，元素回到初始状态，就可以重新正常初始化了。

首先要确保你的initFileCrop函数把Croppie实例存储到元素的data中，方便后续销毁：

function initFileCrop() {
  const cropContainer = $('#your-crop-container');
  // 创建Croppie实例并存储到data里
  const croppieInstance = new Croppie(cropContainer[0], {
    // 你的Croppie配置选项
    viewport: { width: 200, height: 200 },
    boundary: { width: 300, height: 300 }
  });
  cropContainer.data('croppie', croppieInstance);
}

然后添加缓存前的清理逻辑：

// 初始化逻辑保持不变
$(document).on('turbolinks:load', function () {
  initFileCrop();
  $(select2).select2({});
});

// 页面缓存前清理实例
$(document).on('turbolinks:before-cache', function () {
  // 销毁Croppie实例
  const cropContainer = $('#your-crop-container');
  const croppieInstance = cropContainer.data('croppie');
  if (croppieInstance) {
    croppieInstance.destroy();
    cropContainer.removeData('croppie');
  }

  // 销毁Select2实例
  $(select2).each(function() {
    const selectInstance = $(this).data('select2');
    if (selectInstance) {
      $(this).select2('destroy');
    }
  });
});

方案三：使用Turbolinks永久元素（适合特定场景） #

如果你的Croppie容器或Select2选择器是页面中固定不变的元素（比如全局导航里的选择框），可以给元素添加data-turbolinks-permanent属性。Turbolinks在缓存和恢复页面时，会保留这个元素的状态，不会重新渲染它，自然也就不会重复执行初始化逻辑。

比如给Select2元素加属性：

<select id="your-select" data-turbolinks-permanent></select>

不过这个方案只适合不需要随页面内容变化的固定元素，如果你的元素是每个页面动态生成的，就不太适用了。

内容的提问来源于stack exchange，提问作者Xia Lei