是否有Aurelia show.bind的回调或承诺？

Question

在我的模板中,我有一个div,我想用作各种工具提示.当我选择了一个模型时,工具提示显示,然后我使用系绳将它放在正确的位置.如果我在设置使元素显示的模型后立即设置系绳,则其大小未正确计算且Tether不能正确限制约束.如果我用setTimeout去抖动它,我可以把它放在正确的位置,但这感觉很好.我的问题:

是否存在某种我可以附加的回调机制,在show.bind使元素可见后调用？

我的模板:

<div ref="tooltip" show.bind="selectedAlert" class="homepage-stats-tooltip panel panel-default">
    <div class="panel-body">
        <h1>${selectedAlert.Name}</h1>
        <dl>
            <dt>Normal</dt>
            <dd>${selectedAlert.NormalVolume}</dd>
            <dt>Current</dt>
            <dd>${selectedAlert.CurrentVolume}</dd>
        </dl>
    </div>
</div>

设置模型并调用Tether的函数:

showTip(event, state) {
    if (!state) {
        return;
    }

    console.log(`Show tip for ${state.Name}.`);
    this.selectedAlert = state;

    setTimeout(() => {
        new Tether({
            element: this.tooltip,
            target: event.target,
            attachment: "top left",
            targetAttachment: "top right",
            constraints: [
                {
                    to: this.usMap,
                    pin: true,
                    attachment: 'together'
                }
            ]
        });
    }, 10);
}

谢谢!

Answer 1

show对selectedAlert属性的更改触发的DOM更改(例如由属性更改触发)将在aurelia的微任务队列中排队.这具有批量DOM更改的效果,这有利于提高性能.您可以在微任务队列上排队自己的任务,它们将在元素变为可见后执行:

import {TaskQueue} from 'aurelia-task-queue';

@inject(TaskQueue)
export class MyComponent {
  constructor(taskQueue) {
    this.taskQueue = taskQueue;
  }

  showTip(event, state) {
    if (!state) {
        return;
    }

    console.log(`Show tip for ${state.Name}.`);
    this.selectedAlert = state; // <-- task is queued to notify subscribers (eg the "show" binding command) that selectedAlert changed

    // queue another task, which will execute after the task queued above ^^^
    this.taskQueue.queueMicroTask(() => {
        new Tether({
            element: this.tooltip,
            target: event.target,
            attachment: "top left",
            targetAttachment: "top right",
            constraints: [
                {
                    to: this.usMap,
                    pin: true,
                    attachment: 'together'
                }
            ]
        });
    });
  }

}