Aurelia show.bind 是否有回调或承诺?
Is there a callback or promise for Aurelia show.bind?
在我的模板中,我有一个 div 我想用作各种工具提示。当我选择了一个模型时,工具提示就会显示出来,然后我使用系绳将它放在正确的位置。如果我在设置使元素显示的模型后立即设置 tether,则它的大小计算不正确并且 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);
}
谢谢!
DOM 的更改(例如由 selectedAlert
属性 的更改触发的 show
会在 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'
}
]
});
});
}
}
在我的模板中,我有一个 div 我想用作各种工具提示。当我选择了一个模型时,工具提示就会显示出来,然后我使用系绳将它放在正确的位置。如果我在设置使元素显示的模型后立即设置 tether,则它的大小计算不正确并且 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);
}
谢谢!
DOM 的更改(例如由 selectedAlert
属性 的更改触发的 show
会在 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'
}
]
});
});
}
}