Aurelia 中可变数量的插槽

Question

我想创建一个自定义元素，它将像其他元素的手风琴容器一样工作。我打算使用 Bootstrap 4 Collapse。我希望能够在其中放置数量可变的其他自定义元素，因此使用插槽是不够的。

例如，如果我知道手风琴中将放置 3 个元素，我会在 accordion.html 中放置三个插槽，然后像这样使用它：

<accordion>
    <first-custom-element slot="first-element"></first-custom-element>
    <second-custom-element slot="second-element"></second-custom-element>
    <third-custom-element slot="third-element"></third-custom-element>
</accordion>

问题是，我不知道手风琴中需要放置多少元素，因为我想让它更加通用和可重用，以便我可以在我的应用程序的多个页面中使用它。我想要的是一种读取放置在 <accordion> 标签内的所有内容并为这些元素中的每一个动态创建插槽的方法。 Aurelia 中是否有这样的功能，或者应该进行自定义实现？

Answer 1

如果您只需要一个手风琴，只需在 template:

中使用一个 slot

<template>
    <slot></slot>
</template>

不要将 slot 属性放在内部元素中，整个内容将插入到 <slot> 位置。

<accordion>
    <first-custom-element></first-custom-element>
    <second-custom-element></second-custom-element>
    <third-custom-element></third-custom-element>
    ...
</accordion>

Answer 2

从整个手风琴元素中拆分出项目，如下所示：

accordion.html

<template>
  <div id="accordion" role="tablist" aria-multiselectable="true">
      <slot></slot>
  </div>
</template>

手风琴-item.html

<template bindable="panelTitle, headingId, itemId">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="${headingId}">
      <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#${itemId}" aria-expanded="true" aria-controls="${itemId}">
            ${panelTitle}
          </a>
        </h4>
    </div>
    <div id="${itemId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${headingId}">
      <slot></slot>
    </div>
  </div>
</template>

用法

<template>
    <require from="accordian.html"></require>
    <require from="accordian-item.html"></require>

    <accordian>
        <accordian-item panel-title="Panel 1 Title" heading-id="headingOne" item-id="collapseOne">
            <accordian item 1 content>
        </accordian-item>
        <accordian-item panel-title="Panel 2 Title" heading-id="headingTwo" item-id="collapseTwo">
            <accordian item 2 content>
        </accordian-item>
    </accordian>
</template>

Aurelia 中可变数量的插槽

Variable Number of Slots in Aurelia

html

twitter-bootstrap

shadow-dom

typescript

aurelia