2016-05-12 23 views
3

我想使用aurelia @children装饰器在我的父容器视图模型中具有所有子元素按钮,但似乎并没有工作。有没有人有一个例子说明@children装饰者的工作原理?@children装饰器不为我工作在奥里利亚

我想要做的是有一个父容器元素,有一堆子元素(按钮),并在父容器中我试图跟踪按钮已被点击的所有引用所有父容器所具有的按钮,所以无论用户何时单击按钮,我都可以遍历按钮列表来查看之前已经点击了哪些按钮。

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

注释掉

@children('button')buttons;

行允许页面正常加载。感谢您的期待!

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

回答

1

这里就是我的同步和孩子的例子,我”之间发现我发现了。

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

当试图遍历子元素来查找元素时,还存在一个问题。

Not Traversing Child Elements