Question

我正在尝试使用aurelia @children装饰器在我的父容器视图模型中包含所有子元素按钮，但这似乎并不起作用。有没有人有一个例子来说明@children装饰器是如何工作的？

我想要做的是拥有一个包含子元素（按钮）的父容器元素，并且在父容器中我试图通过引用来跟踪已点击的按钮父容器具有的所有按钮，因此每当用户单击按钮时，我都可以遍历按钮列表以查看之前已经点击过的按钮。

目前，我在页面下面的代码无法加载 es6.promise.js：116未处理的promise promise类型错误：。

@children（＆＃39;按钮＆＃39;）按钮;

行允许页面正常加载。谢谢你的期待！

app.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>

定制element.html

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

定制element.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

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

1 个答案: