templates - Dart:WAITING模板完成

Question

我有一个包含一些模板的 HTML，以及一个更改绑定(bind)模板的函数。
函数如下所示:

void onHover(Event e, var detail, Node sender) {
    this.querySelector('#tempToBind').setAttribute("ref", "Btn2");

    this.querySelector('#Btn2').onMouseLeave.listen((e) {
    this.querySelector('#tempToBind').setAttribute("ref", "Btn1");
}

当鼠标进入 Btn1 时应显示 Btn2，如果鼠标离开 Btn2，则应再次显示 Btn1。如果我查询 Btn2 总是 null我猜是因为模板还没有完成加载。
当模板完成加载时，有没有办法获得回调？

模板如下所示:

<template>
<!-- some content here -->
    <template id="tempToBind" bind ref="Btn1"></template>

<template>

<template id="Btn1">
 <div><button>1</button><div>
</template>
<template id="Btn2">
 <div><button>2</button><div>
</template>

Answer 1

据我所知，没有事件，但通常会延迟执行 new Future(() => ...)或 scheduleMicrotask应该做。

void onHover(Event e, var detail, Node sender) {
  this.querySelector('#tempToBind').setAttribute("ref", "Btn2");
  scheduleMicrotask(() {
    this.querySelector('#Btn2').onMouseLeave.listen((e) {
    this.querySelector('#tempToBind').setAttribute("ref", "Btn1");
  });
}


void onHover(Event e, var detail, Node sender) {
  this.querySelector('#tempToBind').setAttribute("ref", "Btn2");
  new Future(() {
    this.querySelector('#Btn2').onMouseLeave.listen((e) {
    this.querySelector('#tempToBind').setAttribute("ref", "Btn1");
  });
}