2016-05-12 81 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