CODEWITHSUNDEEP
aurelia
001
001

Reputation: 74

Custom element child items

I'd like to make a custom collapse element in my aurelia application.

This is how i'm trying it now:

Collapse element:

import { children, customElement } from 'aurelia-framework';

@customElement('collapse')
export class Collapse {
    @children('collapse-item') collapseItems;

    constructor() {
        console.log(this);
    }

    attached() {
        console.log(this);
    }

}

collapse item element: 

import { noView, customElement, child } from 'aurelia-framework';

@noView
@customElement('collapse-item')
export class CollapseItem {
    @child('collape-item-header') header;
    @child('collape-item-body') body;
}

usage: 

<collapse>
    <collapse-item>
        <collapse-item-header>Test Header</collapse-header>
        <collapse-item-body>Test Body</collapse-body>
    </collapse-item>
    <collapse-item>
        <collapse-item-header>Test Header 2</collapse-header>
        <collapse-item-body>Test Body 2</collapse-body>
    </collapse-item>
</collapse>

But its not working;

the collapseItems property in my Collapse instance is always undefined.

The next step would be to populate a bootstrap collapse using the data in the collapseItems array.

I'm obviously doing something wrong, but what?

Upvotes: 1

Views: 822

Answers (1)

Fabio
Fabio

Reputation: 11990

@child and @children require <slot></slot>, so you cannot use @noView. Try this:

import { children, customElement, inlineView } from 'aurelia-framework';

@inlineView(`
  <template>
    <slot></slot>
  </template>
`)
@customElement('collapse')
export class Collapse {
  @children('collapse-item') collapseItems;

  constructor() {
    console.log(this);
  }

  attached() {
    console.log(this);
  }
}

-

import { inlineView, customElement, child } from 'aurelia-framework';

@inlineView(`
  <template>
    <slot></slot>
  </template>
`)
@customElement('collapse-item')
export class CollapseItem {
  @child('collape-item-header') header;
  @child('collape-item-body') body;
}

Upvotes: 3

Related Questions