opcodewriter/app.html

## app.html
<template>
  <a href="#!" click.delegate="selectUser(user.id)" class="collection-item ${user.state}" repeat.for="user of users" id="user-${user.id}">
    <span if.bind="!user.lastName">${user}</span>
    <span if.bind="user.firstName">${user.lastName}, ${user.firstName}</span>
  </a>

</template>

## app.js
export class App {

    users = [
    { id: 1, firstName: 'Rob', lastName: 'Eisenberg' },
    { id: 2, firstName: 'Jeremy', lastName: 'Danyow' },
    { id: 3, firstName: 'Matt', lastName: 'Broadst' }];

    selectUser(userId) {
      let user = this.users.find(u => u.id == userId);
      user.state = 'active';
    }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
  </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>

## styles.css
a {
  display: block;
}

a:link {
    color: black;
    text-decoration: none;
}

.collection-item
{
  background: lightgray;
}

/* since you set background property on .collection-item, this style must come after .collection-item otherwise it's not applied */
.active {
  background: blue;
}
	<template>
	<a href="#!" click.delegate="selectUser(user.id)" class="collection-item ${user.state}" repeat.for="user of users" id="user-${user.id}">
	<span if.bind="!user.lastName">${user}</span>
	<span if.bind="user.firstName">${user.lastName}, ${user.firstName}</span>
	</a>

	</template>
	export class App {

	users = [
	{ id: 1, firstName: 'Rob', lastName: 'Eisenberg' },
	{ id: 2, firstName: 'Jeremy', lastName: 'Danyow' },
	{ id: 3, firstName: 'Matt', lastName: 'Broadst' }];

	selectUser(userId) {
	let user = this.users.find(u => u.id == userId);
	user.state = 'active';
	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	</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>
	a {
	display: block;
	}

	a:link {
	color: black;
	text-decoration: none;
	}

	.collection-item
	{
	background: lightgray;
	}

	/* since you set background property on .collection-item, this style must come after .collection-item otherwise it's not applied */
	.active {
	background: blue;
	}