嵌入式 JavaScript 应用在返回页面后消失

问：

问题：

当我使用嵌入式 Svelte 应用程序重新加载页面时，该应用程序加载正常。如果我点击了 Rails 应用程序其他部分的链接，但随后又回到了包含我的应用程序的页面，该应用程序会在那里停留一瞬间，然后消失。如果我在包含该应用程序的页面上，并且对 Svelte 应用程序进行了更改，则会实时加载模块并重新加载应用程序。webpack-dev-server

正如您将在下面的代码中看到的那样，我必须调用。一个在我添加事件侦听器之前，另一个在侦听器内，用于何时应该加载应用程序并将其插入到 html 中。当我重新加载页面时，两个事件都会触发，但随后我回到页面，只显示日志（和两次）。console.logADDING EVENT...

我认为这与在这个 Rails 应用程序中也被使用有关，因为我不这样做，事件被重新触发。我需要正确的事件侦听器或某种方式在返回包含它的页面时重新加载应用程序。以下是相关文件：turbo-linksDOMContentLoaded

app/javascript/packs/my_app.js：

import App from './my_app/App.svelte';


console.log('ADDING EVENT...');
document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('my_app')
  const name = node.getAttribute('name')
  const app = new App({
    target: node,
    props: {
      name: name
    }
  });
  console.log('CONTENT LOADING...')
  
  window.app = app
})

app/views/.../edit.html.slim：

= javascript_pack_tag 'my_app', 'data-turbo-track': 'reload'
h4 Edit Record
= content_tag :div, id: "my_app", name: 'Svelte' do; end

有趣的事情：

这是一个卡顿的解决方案。它满足了我的需求，但是，重新加载应用程序需要一些时间，因此您可以在一瞬间看到它的先前版本，然后加载该应用程序的新版本。我可以通过将道具发送到我的应用程序来测试这一点：Math.random()

document.addEventListener('turbolinks:load', () => {
  const node = document.getElementById('my_app')
  
  if(node) {
    // Not a great solution but not sure how else to
    // make this more persistent
    const appLoaded = node.getAttribute('app-loaded')
  
    if(node && !(appLoaded === 'true')) {
      node.setAttribute('app-loaded', true)

      const app = new App({
        target: node,
        props: {
          name: Math.random(),
        }
      });
    
      window.app = app
    }
  }
})