kabaehr/app.css

## app.css
ul {
  height: 100px;
  background-color: aliceblue;
  overflow-y: scroll;
}

## app.html
<template>
  <require from="button-component"></require>
  <require from="checkbox-component"></require>
  <require from="scroll-end"></require>
  <require from="app.css"></require>


  <h2>.Call Examples</h2>

  <h3> .call example custom element</h3>
  <checkbox-component callback.call="checkboxToggle()" labels.bind="{ true : 'checked', false: 'not checked'}"></checkbox-component>

  <hr>

  <h3>.call example with a custom attribute for loading more items in a list</h3>
  <ul scroll-end="load.call:loadItems()" class="list">
    <li repeat.for="item of items">
      ${item}
    </li>
  </ul>

  <hr>

  <h3>.call example for callback functions</h3>
  <button-component callback.call="buttonInAppClicked()">Click me!</button-component>

</template>

## app.js
export class App {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  buttonInAppClicked() {
    alert("button callback called");
  }

  loadItems() {
    //here you could do a REST call e.g.
    for(var i = 1; i <= 5; i++)
    this.items.push('new item ' + i);
  }

  checkboxToggle() {
    alert("checkbox toggle called");
  }
}

## button-component.html
<template>
  <button click.delegate="buttonClicked()">
    <content></content>
  </button>
</template>

## button-component.js
import { bindable } from 'aurelia-framework';

export class ButtonComponentCustomElement {

  @bindable callback;

  buttonClicked() {
    alert('button clicked');
    this.callback();
  }
}

## checkbox-component.html
<template>
  <input type="checkbox" checked.bind="checkValue" change.delegate="callback()"> ${labels[checkValue]}
</template>

## checkbox-component.js
import { bindable } from 'aurelia-framework';

export class CheckboxComponentCustomElement {

  @bindable callback;
  @bindable labels;

  checkValue = false; //default state
}

## 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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## scroll-end.js
import { bindable , inject } from 'aurelia-framework';


@inject(Element)
export class ScrollEndCustomAttribute {

  @bindable load;
  element;

  constructor(element) {
    this.element = element;
  }

  attached() {
    this.element.addEventListener('scroll', () => {
        if (this.element.scrollTop + this.element.offsetHeight >= this.element.scrollHeight) {
            this.load();
        }
    });
  }
}
	ul {
	height: 100px;
	background-color: aliceblue;
	overflow-y: scroll;
	}
	<template>
	<require from="button-component"></require>
	<require from="checkbox-component"></require>
	<require from="scroll-end"></require>
	<require from="app.css"></require>


	<h2>.Call Examples</h2>

	<h3> .call example custom element</h3>
	<checkbox-component callback.call="checkboxToggle()" labels.bind="{ true : 'checked', false: 'not checked'}"></checkbox-component>

	<hr>

	<h3>.call example with a custom attribute for loading more items in a list</h3>
	<ul scroll-end="load.call:loadItems()" class="list">
	<li repeat.for="item of items">
	${item}
	</li>
	</ul>

	<hr>

	<h3>.call example for callback functions</h3>
	<button-component callback.call="buttonInAppClicked()">Click me!</button-component>

	</template>
	export class App {
	items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

	buttonInAppClicked() {
	alert("button callback called");
	}

	loadItems() {
	//here you could do a REST call e.g.
	for(var i = 1; i <= 5; i++)
	this.items.push('new item ' + i);
	}

	checkboxToggle() {
	alert("checkbox toggle called");
	}
	}
	<template>
	<button click.delegate="buttonClicked()">
	<content></content>
	</button>
	</template>
	import { bindable } from 'aurelia-framework';

	export class ButtonComponentCustomElement {

	@bindable callback;

	buttonClicked() {
	alert('button clicked');
	this.callback();
	}
	}
	<template>
	<input type="checkbox" checked.bind="checkValue" change.delegate="callback()"> ${labels[checkValue]}
	</template>
	import { bindable } from 'aurelia-framework';

	export class CheckboxComponentCustomElement {

	@bindable callback;
	@bindable labels;

	checkValue = false; //default state
	}
	<!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://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	import { bindable , inject } from 'aurelia-framework';


	@inject(Element)
	export class ScrollEndCustomAttribute {

	@bindable load;
	element;

	constructor(element) {
	this.element = element;
	}

	attached() {
	this.element.addEventListener('scroll', () => {
	if (this.element.scrollTop + this.element.offsetHeight >= this.element.scrollHeight) {
	this.load();
	}
	});
	}
	}