2016-05-12 6 views
3

私は、親コンテナview-model内のすべての子要素ボタンを持つためにaurelia @childrenデコレータを使用しようとしていますが、動作していないようです。誰かが@childrenデコレータがどのように動作するかを示す例がありますか?@childrenデコレータが私のためにaureliaで動作しない

子要素(ボタン)の束を持つ親コンテナ要素を持ち、親コンテナ内で、すべてのボタンをクリックするとどのボタンがクリックされたかを把握しようとしています親コンテナのボタンはユーザーがボタンをクリックするたびにボタンのリストを繰り返して、どのボタンが既にクリックされているかを見ることができます。

現在、このページの下にあるコードは、 es6.promise.jsでロードできません。116未処理の約束拒否TypeError :.

@children( 'button')ボタン;

行では、ページを正常に読み込むことができます。見てくれてありがとう!

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

関連する問題