当 bind:this 在 Svelte 的 {#await} 中使用时，如何触发反应?

Question

假设我想要一个小的UI覆盖，指向一个DOM元素(让我们称之为"Tap Here"(。要获取它应该指向的位置：我使用 bind：this 并且它可以工作，除非我不在 {#await} 中使用它。

<script>
import TapHere from './TapHere.svelte';
let enableButton;
$: enableButtonRect = enableButton && enableButton.getBoundingClientRect();
let promise = new Promise((resolve) => {
setInterval(resolve, 3000);
});
</script>
{#await promise}
<p>
waiting...
</p>
{:then}
<div>
<button bind:this={enableButton}>Enable</button>
<button>Disable</button>
<TapHere rect={enableButtonRect}/>
</div>
{/await}

https://svelte.dev/repl/4e0e477d6a394a83a2d79b3d1fa50525?version=3.12.1

(enableButtonRect 可能有点红鲱鱼，因为这个问题表现为只是试图将 enableButton 本身传递给 TapHere。 如果您删除等待，则 TapHere 将转到预期位置;但是使用 await，TapHere 不会被 enableButtonRect 更改触发。我应该在这里做什么？

Answer 1

不知何故，即使在承诺解析后，enableButton也会在承诺解析块中undefined。

但是，如果您在块之外评估enableButton，则会在承诺仍处于挂起状态时正确undefined，并在承诺解决后正确设置为[object HTMLButtonElement]。

这种行为必须有一个解释，但我不知道。希望有人可以详细说明。

因此，您可以通过将<TapHere>组件移动到 promise 块之外来实现您想要的结果：

<script>
import TapHere from './TapHere.svelte';
let enableButton;
$: enableButtonRect = enableButton && enableButton.getBoundingClientRect();

let promise = new Promise((resolve) => {
setInterval(resolve, 3000);
});
</script>
{#await promise}
<p>
waiting...
</p>
{:then}
<div>
<button bind:this={enableButton}>Enable</button>
<button>Disable</button>
</div>
<p>Inside promise resolve block: {enableButton}</p>
{/await}
<p>Outside promise resolve block: {enableButton}</p>
<TapHere rect={enableButtonRect}/>

编辑

若要在承诺解析后显示工具提示，可以执行以下操作：

<script>
import { onMount } from 'svelte';
import TapHere from './TapHere.svelte';
let enableButton;
let disabled = true;
$: enableButtonRect = enableButton && enableButton.getBoundingClientRect() && !disabled;

onMount(() => {
const interval = setInterval(() => { disabled = false }, 3000)
return () => clearInterval(interval)
})
</script>
<div>
<button bind:this={enableButton} {disabled}>Enable</button>
<button>Disable</button>
<TapHere rect={enableButtonRect}/>
</div>

(更新了 REPL(

https://svelte.dev/repl/e647bc2b1a024e8885ebb96317887710?version=3.12.1