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

问题描述

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

是否有某种回调机制可以附加到 show.bind 使元素可见后调用?

我的模板:

<div class="panel-body">
${selectedAlert.Name}
<dl><dt>正常</dt><dd>${selectedAlert.NormalVolume}</dd><dt>电流</dt><dd>${selectedAlert.CurrentVolume}</dd></dl>

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

showTip(event, state) {如果(！状态){返回;}console.log(`显示 ${state.Name} 的提示.`);this.selectedAlert = 状态；setTimeout(() => {新系绳({元素:this.tooltip，目标:事件.目标，附件:左上角"，目标附件:右上角"，限制条件: [{到:this.usMap，引脚:真实，附件:'一起'}]});}, 10);}

谢谢！

解决方案

由 selectedAlert 属性的更改触发的对 DOM 的更改(例如 show微任务队列.这具有批量 DOM 更改的效果，有利于性能.您可以将自己的任务加入微任务队列，它们将在元素可见后执行:

import {TaskQueue} from 'aurelia-task-queue';@inject(任务队列)导出类 MyComponent {构造函数(任务队列){this.taskQueue = taskQueue;}显示提示(事件，状态){如果(！状态){返回;}console.log(`显示 ${state.Name} 的提示.`);this.selectedAlert = 状态；//<-- 任务排队通知订阅者(例如show"绑定命令)selectedAlert改变了//排队另一个任务，它会在上面排队的任务之后执行^^^this.taskQueue.queueMicroTask(() => {新系绳({元素:this.tooltip，目标:事件.目标，附件:左上角"，目标附件:右上角"，限制条件: [{到:this.usMap，引脚:真实，附件:'一起'}]});});}}

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:

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

My template:

<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>

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

Thanks!

解决方案

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屋！