In Aurelia, can a slot be used in a repeat.for binding?

Question

I'd like to create a custom element that loops through an array and applies the to each item in the array. For example, the view template of the custom element would contain something like:

<div repeat.for="i of items">
  <div with.bind="i">
    <slot></slot>
  </div>
</div>

When I remove the repeat.for and with.bind attributes, the slot displays a single time. Is there a way to make it repeat for each item in the list?

Bentz

Answer 1

No, you cannot use slots with repeat.for or bind today. To do this you have to use replaceable parts. For example:

<div repeat.for="i of items">
  <div with.bind="i">
    <template replaceable part="content"></template>
  </div>
</div>

Usage:

<my-component>
  <template replace-part="content">Some Content - ${somePropertyOfI}</template>
</my-component>

Runnable example: https://gist.run/?id=29aa1c1199f080c9ba0e72845044799b

Cnossus

the aurelia blog aurelia.io/blog/2016/05/23/… says "All the above is implemented with Aurelia. It also works with template controllers such as if and repeat which can dynamically generate content. We've fixed up our @ child and @ children decorators to understand the new model as well." but it doesn't appear to work – Trisaccharide

@MosèBottacini At the time of this answer, it was not possible to use ´repeat` or bind with <slot>. Explain me what you want to do and I'll try to give you a solution – Cnossus

just signaled that probably the documentation is out of sync as it clearly states that it could be done – Trisaccharide