dart - Dart：当组件有多个实例时，如何引用一个组件元素？

Question

我有一个模板：

<element name="x-my-elem" constructor="MyElem" extends="div">
  <template>
    <div> 
      <button on-click="onClick()"> Button </button>
      <div id="displayMe">
      </div>
    </div>
  </template>
</element>

和脚本：

class MyElem {
   onClick {
      query("#displayMe").innerHtml = "hello";
   }
}

现在，在 html 文件中有多个组件实例：

<div is="x-my-elem" id="p1" ></div>
<div is="x-my-elem" id="p2" ></div>
...

我希望每个按钮只更改属于它的“displayMe”。如何实现？有没有办法生成唯一的ID？比 this.elements[i] 更好的东西？

Answer 1

首先，我认为对于组件内部，您应该更喜欢类而不是 id，因为您可以拥有组件的多个实例，就像您在此处所做的那样。

无论哪种方式，将查询范围限定为组件的方法是使用this.query()而不是query()，如下所示：

class MyElem {
   onClick {
      this.query(".displayMe").innerHtml = "hello";
   }
}