istrau2/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://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>

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

## toggle-badge.html
<template class="toggle-badge" class.bind="checkedIndex > -1 ? '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, computedFrom } from 'aurelia-framework';

export class ToggleBadge {

    @bindable checked;
    @bindable text;

    toggle() {
      console.log(this.checkedIndex);
      if (this.checkedIndex > -1) {
        this.checked.splice(this.checkedIndex, 1);
      }
      else {
        this.checked.push(this.text);
      }
    }

    @computedFrom('checked', 'text')
    get checkedIndex() {
      return this.checked.indexOf(this.text);
    }

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

	export class ToggleBadge {

	@bindable checked;
	@bindable text;

	toggle() {
	console.log(this.checkedIndex);
	if (this.checkedIndex > -1) {
	this.checked.splice(this.checkedIndex, 1);
	}
	else {
	this.checked.push(this.text);
	}
	}

	@computedFrom('checked', 'text')
	get checkedIndex() {
	return this.checked.indexOf(this.text);
	}

	}