freshcutdevelopment/app.html

## app.html
<template>
  <require from="style.css"></require>
  <require from="list-group"></require>
  <require from="pokemon.html"></require>

  <section>
    <h1>${message}</h1>

    <hr/>
    <h3>custom template</h3>
    <list-group items-source.bind="pokemonItems">
      <pokemon model.bind="item"></pokemon>
    </list-group>

    <hr/>
    <h3>default template</h3>
    <list-group items-source.bind="pokemonItems"
                default-value.bind="defaultValue">
    </list-group>
  </section>
</template>

## app.js
export class App {

  constructor(){
    this.message = 'Pokémon library';

    this.pokemonItems = [
        {
          name :"Bulbasaur",
          category: "grass/poison",
          imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
          description: " Bulbasaur (Japanese: フシギダネ Fushigidane) is a dual-type Grass/Poison Pokémon introduced in Generation I.",
          color:"grass"
        },
        {
          name :"Charmander",
          category: "fire",
          imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png",
          description: " Charmander (Japanese: ヒトカゲ Hitokage) is a Fire-type Pokémon introduced in Generation I.",
          color: "fire"
        },
        {
          name :"Squirtle",
          category: "water",
          imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png",
          description: "Squirtle (Japanese: ゼニガメ Zenigame) is a Water-type Pokémon introduced in Generation I..",
          color:"water"

        },
        {
          name :"Pidgey ",
          category: "flying",
          imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/16.png",
          description: "Pidgey (Japanese: ポッポ Poppo) is a dual-type Normal/Flying Pokémon introduced in Generation I."
        }
    ];

    this.defaultValue = model => model.name;
  }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet" >
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://freshcutdevelopment.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://freshcutdevelopment.github.io/rjs-bundle/config.js"></script>
    <script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## list-group.html
<template>
  <ul class="list-group">
    <li repeat.for="item of itemsSource" href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <template replaceable part="item-template">${defaultValue(item)}</template>
    </li>
  </ul>
</template>

## list-group.js
import {bindable, processContent} from 'aurelia-templating';
import {FEATURE} from 'aurelia-pal';

//This custom attribute was created by Jeremy Danyow as a part of this
//stackoverflow answer https://stackoverflow.com/questions/43306744/using-custom-element-content-as-item-template/43325889#43325889
@processContent(makePartReplacementFromContent)
export class ListGroup {
  @bindable itemsSource = null;
  @bindable defaultValue = model => "";

}

function makePartReplacementFromContent(viewCompiler, viewResources, element, behaviorInstruction) {
  const content = element.firstElementChild;
  if (content) {

    //note: In the latest version of aurelia this can be done in a cleaner way using DOM.createTemplateElement() method.
    const template = document.createElement('template');

    // support browsers that do not have a real <template> element implementation (IE)
    FEATURE.ensureHTMLTemplateElement(template);

    // indicate the part this <template> replaces.
    template.setAttribute('replace-part', 'item-template');

    // replace the element's content with the <template>
    element.insertBefore(template, content);
    element.removeChild(content);
    template.content.appendChild(content);

    return true;
  }
}

## main.js
export function configure(aurelia) {
  aurelia.use.basicConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}

## pokemon.html
<template bindable="model">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1 ${model.color}">${model.name}</h5>
      <small>${model.category}</small>
    </div>
    <hr/>
    <div class="d-flex w-100 justify-content-between">
      <img src="${model.imageSource}"/>
      <p class="mb-1">
        ${model.description}
      </p>
    </div>
</template>

## style.css
.grass{
  color: #A7DB8D;
}

.fire{
  color:#F08030;
}

.water{
  color: #9DB7F5;
}

.flying{
  color:#C6C6A7;
}

section{
  margin-left:20px;
  margin-right:20px;
}

.list-group{
  width:600px;
}
	<template>
	<require from="style.css"></require>
	<require from="list-group"></require>
	<require from="pokemon.html"></require>

	<section>
	<h1>${message}</h1>

	<hr/>
	<h3>custom template</h3>
	<list-group items-source.bind="pokemonItems">
	<pokemon model.bind="item"></pokemon>
	</list-group>

	<hr/>
	<h3>default template</h3>
	<list-group items-source.bind="pokemonItems"
	default-value.bind="defaultValue">
	</list-group>
	</section>
	</template>
	export class App {

	constructor(){
	this.message = 'Pokémon library';

	this.pokemonItems = [
	{
	name :"Bulbasaur",
	category: "grass/poison",
	imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png",
	description: " Bulbasaur (Japanese: フシギダネ Fushigidane) is a dual-type Grass/Poison Pokémon introduced in Generation I.",
	color:"grass"
	},
	{
	name :"Charmander",
	category: "fire",
	imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png",
	description: " Charmander (Japanese: ヒトカゲ Hitokage) is a Fire-type Pokémon introduced in Generation I.",
	color: "fire"
	},
	{
	name :"Squirtle",
	category: "water",
	imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png",
	description: "Squirtle (Japanese: ゼニガメ Zenigame) is a Water-type Pokémon introduced in Generation I..",
	color:"water"

	},
	{
	name :"Pidgey ",
	category: "flying",
	imageSource: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/16.png",
	description: "Pidgey (Japanese: ポッポ Poppo) is a dual-type Normal/Flying Pokémon introduced in Generation I."
	}
	];

	this.defaultValue = model => model.name;
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet" >
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
	<script src="https://freshcutdevelopment.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://freshcutdevelopment.github.io/rjs-bundle/config.js"></script>
	<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://freshcutdevelopment.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<ul class="list-group">
	<li repeat.for="item of itemsSource" href="#" class="list-group-item list-group-item-action flex-column align-items-start">
	<template replaceable part="item-template">${defaultValue(item)}</template>
	</li>
	</ul>
	</template>
	import {bindable, processContent} from 'aurelia-templating';
	import {FEATURE} from 'aurelia-pal';

	//This custom attribute was created by Jeremy Danyow as a part of this
	//stackoverflow answer https://stackoverflow.com/questions/43306744/using-custom-element-content-as-item-template/43325889#43325889
	@processContent(makePartReplacementFromContent)
	export class ListGroup {
	@bindable itemsSource = null;
	@bindable defaultValue = model => "";

	}

	function makePartReplacementFromContent(viewCompiler, viewResources, element, behaviorInstruction) {
	const content = element.firstElementChild;
	if (content) {

	//note: In the latest version of aurelia this can be done in a cleaner way using DOM.createTemplateElement() method.
	const template = document.createElement('template');

	// support browsers that do not have a real <template> element implementation (IE)
	FEATURE.ensureHTMLTemplateElement(template);

	// indicate the part this <template> replaces.
	template.setAttribute('replace-part', 'item-template');

	// replace the element's content with the <template>
	element.insertBefore(template, content);
	element.removeChild(content);
	template.content.appendChild(content);

	return true;
	}
	}
	export function configure(aurelia) {
	aurelia.use.basicConfiguration();
	aurelia.start().then(() => aurelia.setRoot());
	}
	<template bindable="model">
	<div class="d-flex w-100 justify-content-between">
	<h5 class="mb-1 ${model.color}">${model.name}</h5>
	<small>${model.category}</small>
	</div>
	<hr/>
	<div class="d-flex w-100 justify-content-between">
	<img src="${model.imageSource}"/>
	<p class="mb-1">
	${model.description}
	</p>
	</div>
	</template>
	.grass{
	color: #A7DB8D;
	}

	.fire{
	color:#F08030;
	}

	.water{
	color: #9DB7F5;
	}

	.flying{
	color:#C6C6A7;
	}

	section{
	margin-left:20px;
	margin-right:20px;
	}

	.list-group{
	width:600px;
	}