在 Aurelia 中重新评估绑定后触发回调

Question

我正在构建一个拖放工作区，类似于您发现的用于制作模型的工作区。我有一个工作区自定义元素，它有一个更大的嵌套元素，可以缩放和平移。因此，我需要仔细跟踪工作区的大小和位置数据以及所有包含的元素。

在我的自定义元素的附加事件中，我以编程方式将工作区的高度和宽度设置为 JavaScript 对象，该对象绑定到视图中的 css：

工作区CustomElement.js

export class WorkspaceCustomElement {

    constructor(element) {
        this.element = element;
    }

    attached() {
        this.workspace.size = {
            height: this.element.height * 5,
            width: this.element.width * 5
        }
    }
}

工作空间CustomElement.html

<div css="height: ${workspace.height}px; width: ${workspace.width}px; 
    left: ${(element.clientWidth - workspace.width)/2}px; 
    top: ${(element.clientHeight - workspace.height)/2}px;"></div>

现在我在尝试获取子元素的位置时遇到了问题。我也在它们上面附加了回调，但是它们在上面附加的回调之前被评估，所以 css 绑定没有被评估，并且大小和位置是错误的。

我需要添加一个回调后的attached()进行了评估，并绑定已更新。我可以通过使用setTimeouthack来实现这一点，但我不相信这会一直有效。

attached() {
    this.workspace.size = {
        height: this.element.height * 5,
        width: this.element.width * 5
    }

    setTimeout(() => {
        let components = this.element.querySelectorAll('.component');
        Array.prototype.forEach.call(components, (component) => {
            let model = component.model;
            model.position = { 
                x: component.clientLeft,
                y: component.clientTop
            };
        }
    }, 0)
}

是否有更好、更可靠的方法在下一次绑定更新后对指令进行排队？

Answer 1

最佳做法是将任务添加到TaskQueue. 在TaskQueue幕后，绑定引擎使用自身，因此添加新任务会将其排在绑定更新之后。

工作区CustomElement.js

export class WorkspaceCustomElement {

    constructor(element, queue) {
        this.element = element;
        this.queue = queue;
    }

    attached() {
        this.workspace.size = {
            height: this.element.height * 5,
            width: this.element.width * 5
        }
        this.queue.queueMicroTask(() => {
            let components = this.element.querySelectorAll('.component');
            Array.prototype.forEach.call(components, (component) => {
                let model = component.model;
                model.position = { 
                    x: component.clientLeft,
                    y: component.clientTop
                };
            }
        });
    }
}

有关更多信息，请参见此处：TaskQueue API