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