funky-jojo/app.html

## app.html
<template>
  <require from="./toggle-badge"></require>
  <toggle-badge text="North Carolina" checked.bind="inboundLanes"></toggle-badge>
  <toggle-badge text="South Carolina" checked.bind="inboundLanes"></toggle-badge>
  <div>Selected Lanes:</div>
  <div repeat.for="lane of inboundLanes">${lane}</div>

<hr/>

  <label><input type="checkbox" model.bind="'North Carolina'" checked.bind="outboundLanes">North Carolina</label>
  <label><input type="checkbox" model.bind="'South Carolina'" checked.bind="outboundLanes">South Carolina</label>
  <div>Selected Outbound Lanes:</div>
  <div repeat.for="lane of outboundLanes">${lane}</div>


</template>

## app.js
export class App {
  inboundLanes = [];
  outboundLanes = [];

}

## 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>

## toggle-badge.css
.selected button {
  color: red;
}

## toggle-badge.html
<template class="toggle-badge ${isSelected ? 'selected' : ''}">
    <require from="./toggle-badge.css"></require>
    <button click.trigger="toggle()"><i class="fa fa-check"></i>${text}</button>
</template>

## toggle-badge.js
import { bindable, bindingMode } from 'aurelia-framework';

export class ToggleBadge {

    @bindable({ defaultBindingMode: bindingMode.twoWay }) checked: Boolean;
    @bindable({ defaultBindingMode: bindingMode.oneWay }) text: String;

    isSelected: Boolean;

    toggle() {
        this.isSelected = (this.checked = !this.checked);
    }

}
	<template>
	<require from="./toggle-badge"></require>
	<toggle-badge text="North Carolina" checked.bind="inboundLanes"></toggle-badge>
	<toggle-badge text="South Carolina" checked.bind="inboundLanes"></toggle-badge>
	<div>Selected Lanes:</div>
	<div repeat.for="lane of inboundLanes">${lane}</div>

	<hr/>

	<label><input type="checkbox" model.bind="'North Carolina'" checked.bind="outboundLanes">North Carolina</label>
	<label><input type="checkbox" model.bind="'South Carolina'" checked.bind="outboundLanes">South Carolina</label>
	<div>Selected Outbound Lanes:</div>
	<div repeat.for="lane of outboundLanes">${lane}</div>


	</template>
	<!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 class="toggle-badge ${isSelected ? 'selected' : ''}">
	<require from="./toggle-badge.css"></require>
	<button click.trigger="toggle()"><i class="fa fa-check"></i>${text}</button>
	</template>
	import { bindable, bindingMode } from 'aurelia-framework';

	export class ToggleBadge {

	@bindable({ defaultBindingMode: bindingMode.twoWay }) checked: Boolean;
	@bindable({ defaultBindingMode: bindingMode.oneWay }) text: String;

	isSelected: Boolean;

	toggle() {
	this.isSelected = (this.checked = !this.checked);
	}

	}