aurelia - @children 装饰师不为我在 aurelia 工作

Question

我正在尝试使用 aurelia @children 装饰器在我的父容器 View 模型中包含所有子元素按钮，但这似乎不起作用。有没有人有展示@children 装饰器如何工作的示例？

我想要做的是有一个父容器元素，它有一堆子元素(按钮)，在父容器中，我试图通过引用所有的按钮来跟踪点击了哪些按钮父容器具有按钮，因此每当用户单击按钮时，我都可以遍历按钮列表以查看之前已经单击了哪些按钮。

目前，我在页面下方的代码无法加载es6.promise.js:116 未处理的 promise 拒绝 TypeError:.

注释掉

@children('button') 按钮；

line 允许页面正常加载。感谢您的关注!

应用.html

<template>
  <require from="./custom-element"></require>
  <my-custom-element>
      <button class="btn btn-default" type="button">On</button>
      <div>
        This div falls back to &lt;content&gt; since nothing more specific chooses it. <br />
        Notice how it is displayed last b/c of this.<br />
        Remove &lt;content /&gt; element in custom element and this won't be used in the rendering of the custom element.
      </div>
      <div class="footer">Footer</div>
      <button class="btn btn-default" type="button">Off</button>
  </my-custom-element>      
</template>

自定义元素.html

<template>   
    <content select="button"></content>
    <content select="div.footer"></content>
    <content></content>
</template>

自定义元素.js

import {customElement, children} from 'aurelia-framework';

@customElement('my-custom-element')
export class MyCustomElement {
  @children('button') buttons;
  constructor() {
  }

  bind() {
    console.log(this.buttons);
  }
}

Answer 1

这是我发现的同步和子示例之间的内容。

@customElement('my-custom-element')
@children({ name: "buttons", selector: "button" })
export class MyCustomElement {
  bind() {
    console.log(this.buttons);
  }
}

尝试遍历子元素以查找元素时也存在问题。

Not Traversing Child Elements