AStoker/app.html

## app.html
<template>
  <require from="./pagerCustomElement"></require>
  <pager items.bind="tracks">
    <div slot="title-template">Some song</div>
    <div slot="content-template">
      <div repeat.for="line of item.content">
        Line: ${$index + 1}. ${line.lyric}
      </div>
    </div>
  </pager>
</template>

## app.js
export class App {
  tracks = [
    { title: 'Walking on the Sun', content: [
        {
          lyric:'foo'
        },
        {
          lyric:'bar'
        }
      ]
    },
    { title: 'All Star', content: [
        {
          lyric:'boo'
        },
        {
          lyric:'blah'
        }
      ]
    }
  ]
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## pagerCustomElement.html
<template>
  <div repeat.for="item of selectedItems">
    <slot name="title-template">
      <div>${item.title}</div>
    </slot>
    <slot name="content-template">
      <div repeat.for="line of item.content">
        ${$index + 1}. ${line.lyric}
      </div>
    </slot>
  </div>
</template>

## pagerCustomElement.js
import { bindable, computedFrom } from 'aurelia-framework';
export class PagerCustomElement {
    @bindable pageSize = 10;
    @bindable items;
    currentPage = 0;

    @computedFrom('currentPage')
    get selectedItems() {
      let pageSize = this.pageSize;
      let currentPage = this.currentPage;
      return this.items.slice(pageSize * currentPage, pageSize);
    }
}
	<template>
	<require from="./pagerCustomElement"></require>
	<pager items.bind="tracks">
	<div slot="title-template">Some song</div>
	<div slot="content-template">
	<div repeat.for="line of item.content">
	Line: ${$index + 1}. ${line.lyric}
	</div>
	</div>
	</pager>
	</template>
	export class App {
	tracks = [
	{ title: 'Walking on the Sun', content: [
	{
	lyric:'foo'
	},
	{
	lyric:'bar'
	}
	]
	},
	{ title: 'All Star', content: [
	{
	lyric:'boo'
	},
	{
	lyric:'blah'
	}
	]
	}
	]
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<div repeat.for="item of selectedItems">
	<slot name="title-template">
	<div>${item.title}</div>
	</slot>
	<slot name="content-template">
	<div repeat.for="line of item.content">
	${$index + 1}. ${line.lyric}
	</div>
	</slot>
	</div>
	</template>
	import { bindable, computedFrom } from 'aurelia-framework';
	export class PagerCustomElement {
	@bindable pageSize = 10;
	@bindable items;
	currentPage = 0;

	@computedFrom('currentPage')
	get selectedItems() {
	let pageSize = this.pageSize;
	let currentPage = this.currentPage;
	return this.items.slice(pageSize * currentPage, pageSize);
	}
	}