从“预览”模式更改为“编辑”模式时丢失事件侦听器

Question

我在布局中有一些由事件监听器控制的元素。当我从“查看模式”进入“编辑模式”并且事件侦听器不再工作时，会出现问题。我的猜测是，将模式从视图更改为编辑会创建 DOM 的第二个版本，并且在初始页面渲染期间附加的事件侦听器不再起作用。你以前有过这样的问题吗？解决它的最佳方法是什么？

Answer 1

有与此特定用例相关的相对较新的文档：https://v3.docs.apostrophecms.org/guide/front-end-tips.html#register-js-to-keep-up-with-in-context-editing-events

简短的版本是前端有一个帮助方法，可以帮助您在每次 DOM 刷新时运行客户端代码，apos.util.onReady：

// modules/assets/ui/src/index.js
export default () = {
  if (document.querySelector('[data-party-toggle]')) {
    // ?
    apos.util.onReady(() => {
      const partyToggle = document.querySelector('[data-party-toggle]');

      partyToggle.addEventListener('click', engagePartyMode);

      function engagePartyMode () {
        // Party.
      }
    });
  }
}

如果您要添加侦听器的元素是小部件，并且代码仅限于小部件类型，请改用小部件播放器。