从"preview"模式更改为"edit"模式时丢失事件侦听器

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.
}
});
}
}

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