Question

我有一个带有一些模板的HTML和一个更改绑定模板的函数。函数看起来像这样：

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

飞镖：等待模板完成

1 个答案: