javascript - 在 GoldenLayout 中捕获 Pane 调整大小事件的正确方法

Question

我想在发生调整大小事件(无论是调整 Pane 、整个浏览器还是缩放)时在一个 Pane (即容器内容项)中执行操作。下面的工作，但是......如果我然后在 Pane 中拖动，甚至从左到右，到右到左，或从上到下，它就会停止工作。

我假设重新排列 Pane 会重置某些内容，并且有一种正确 方法来获取持久事件处理程序。但我无法从文档中解决。

myLayout.on('initialised',initPanes);

function initPanes(){
myLayout.root.contentItems[0].contentItems[0].on('resize',function(){
    console.log("First pane resized");  //TEMP
    });
myLayout.root.contentItems[0].contentItems[1].on('resize',function(){
    console.log("Second pane resized");  //TEMP
    });
//...
}

Answer 1

很可能您将 resize 处理程序绑定(bind)到一些中间布局对象，例如 stack 或 column，这些可能会被销毁并重新当您重新安排布局时创建，在此过程中杀死您的听众。

你可以这样检查对象类型:

%myLayout.root.contentItems[0].contentItems[0].type
"stack"

您应该改为将“调整大小”监听器绑定(bind)到组件的容器:

myLayout.on('componentCreated',function(component) {
    component.container.on('resize',function() {
        console.log('component.resize',component.componentName);
    });
});

以防止它在您重新安排布局时被删除。