CODEWITHSUNDEEP
aurelia
Glenn Pierce
Glenn Pierce

Reputation: 950

Aurelia custom element with dynamic content

I have a a lot of object instances in an array of my model that all conform to an interface ITrack and I wanted to create a paginate component for these as a learning exercise. I wanted to create a component that would allow me to write this in a template

<pager page-size="10" model.bind="tracks">
<div>
<span>{% track.name %}</span>
</div>
</pager>

So a pager would be created and each ITrack displayed would have to format

<div>
<span>{% track.name %}</span>
</div>

Is it possible for the component to grab the content between the pager element to use as a template when creating the list of tracks.

I have looked at http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/creating-components/3 but not sure if I could get the content.

Or is this not a good approach ?

Upvotes: 1

Views: 441

Answers (1)

Matthew James Davis
Matthew James Davis

Reputation: 12295

Create a custom element with a template part.

pagerCustomElement.html

<template>
  <div repeat.for="item of selectedItems" part="item-template">
    ${item}
  </div>
</template>

app.html

<require from="./pagerCustomElement"></require>
<pager items.bind="tracks">
  <template replace-part="item-template">
    <div>${item.title}</div>
  </template>
</pager>

See the full example here: https://gist.run/?id=698ba0c7cf73f1f55b1a770182da41c4

The "documentation" for this can be found in this issue.

Upvotes: 4

Related Questions