child & children

child

app.html

<require from="./textbox/textbox"></require>
<cst-textbox id="1" value="abc">
<style width="200px" height="100px"> </style>
<icon class="happy"> </icon>
</cst-textbox>

textbox.html

<template>
<div class="pg-code-001">
<input type="text" id="${id}" value.bind="value"
style="width:${style.width};height:${style.height};">
<div>
<span>${icon.class}</span>
</div>
</div>
<!-- here the child elements will be rendered in DOM, just ignore tags -->
<slot></slot>
</template>

textbox.js

import {
child,
customElement,
bindable,
noView
} from 'aurelia-framework';
@noView
export class Style {
@bindable width;
@bindable height;
}
@noView
export class Icon {
@bindable class;
}
@customElement('cst-textbox')
export class TextboxCls {
@bindable id;
@bindable value;
@child('style') style;
@child('icon') icon;
attached() {
console.log('style');
console.log(this.style);
console.log('icon');
console.log(this.icon);
}
}

children

app.html

<require from="./textarea/textarea"></require>
<cst-textarea id="1" value="abc">
<style width="200px" height="100px"> </style>
<icon class="happy"> </icon>
<icon class="test"> </icon>
<icon class="test1"> </icon>
<icon class="test2"> </icon>
</cst-textarea>

textarea.html

<template>
<div class="pg-code-001">
<textarea id="${id}" value.bind="value"></textarea>
<div repeat.for="icon of icons">
<span>${icon.class}</span>
</div>
</div>
<!-- here the child elements will be rendered in DOM, just ignore tags -->
<slot></slot>
</template>

textarea.js

import {
child,
children,
customElement,
bindable,
noView
} from 'aurelia-framework';
@noView
export class Icons {
@bindable class;
}
@noView
export class Hide {
@bindable charCount;
}
@customElement('cst-textarea')
export class Textarea {
@bindable id;
@bindable value;
@children('icons') icons;
@child('hide') hide;
attached() {
console.log('icons');
console.log(this.icons);
console.log('hide');
console.log(this.hide);
}
}

Ref links

  • Sample working code exists in current folder (npm install, npm start).
  • docs
    • @child(selector) - Decorates a property to create a reference to a single immediate child content element. Doesn't work with @containerless().
  • aurelia issue 451
  • aurelia issue 143