可変数のAureliaスロット

Question

他の要素のためのアコーディオンコンテナのように動作するカスタム要素を作成したいと思います。私はブートストラップ4 Collapseを使用する予定です。私は、スロットを使用するだけでは十分でないように、他のカスタム要素をさまざまな数に配置できるようにしたいと考えています。例えば

私はaccordion.htmlに3つのスロットを配置し、このようにそれを使用するアコーディオンに配置された3つの要素があることを知っていた場合：事は私にはない、ある

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

accordion.html

使い方

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

Answer 2

あなたが唯一のアコーディオンが必要な場合は、ジュストあなたtemplateで1 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>