Aurelia show.bind是否有回调或承诺? [英] Is there a callback or promise for Aurelia show.bind?

问题描述

在我的模板中，我有一个div用作各种工具提示.选择模型后，将显示工具提示，然后使用系绳将其放置在正确的位置.如果在设置使元素显示的模型后立即设置系绳，则无法正确计算其大小，并且系绳没有适当地限制约束.如果我使用setTimeout对其进行反跳，则可以将其放在正确的位置，但是感觉很糟糕.我的问题:

In my template, I have a div I want to use as a tooltip of sorts. When I have a model selected, the tooltip shows, and then I use tether to put it in the correct spot. If I set tether immediately after setting the model that makes the element show, it's size isn't computed properly and Tether doesn't properly limit constraints. If I debounce it with a setTimeout, I can get it in the right place, but that feels hokey. My question:

在show.bind使元素可见之后，是否可以调用某种回调机制?

Is there some sort of callback mechanism I can attach to that is called after show.bind has made the element visible?

我的模板:

<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的函数:

The function that sets the model and calls 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);
}

谢谢！

推荐答案

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

Changes to the DOM such as a show triggered by changes to the selectedAlert property are enqueued on aurelia's micro task queue. This has the effect of batching DOM changes, which is good for performance. You can enqueue your own tasks on the micro task queue and they will execute after the element has become visible:

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'
                }
            ]
        });
    });
  }

}

这篇关于Aurelia show.bind是否有回调或承诺?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！