Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Aurelia Gist - Creating a templated list
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment