Question

我想在我的aurelia应用程序中制作自定义折叠元素。

这就是我现在尝试的方式：

折叠元素：

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

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

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

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

}

折扣商品元素：

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

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

用法：

<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>

但它不起作用;

我的Collapse实例中的collapseItems属性始终未定义。

下一步是使用collapseItems数组中的数据填充引导程序崩溃。

我显然做错了什么，但是什么？

Answer 1

@child和@children需要<slot></slot>，因此您无法使用@noView。试试这个：

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

自定义元素子项

1 个答案: