6

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?

Fabio
  • 11,892
  • 1
  • 25
  • 41
Glen Hughes
  • 4,712
  • 2
  • 20
  • 25

1 Answers1

8

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

Fabio
  • 11,892
  • 1
  • 25
  • 41
  • 1
    the aurelia blog http://aurelia.io/blog/2016/05/23/aurelia-shadow-dom-v1-slots-prerelease/ 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 – Mosè Bottacini Jan 31 '18 at 15:59
  • @MosèBottacini At the time of this answer, it was not possible to use ´repeat` or `bind` with ``. Explain me what you want to do and I'll try to give you a solution – Fabio Jan 31 '18 at 17:01
  • just signaled that probably the documentation is out of sync as it clearly states that it could be done – Mosè Bottacini Feb 04 '18 at 15:40