Is there a callback or promise for Aurelia show.bind?

Question

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

Answer 1

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

}