thinkOfaNumber/app.html

## app.html

<template>
  <require from='input-checkbox'></require>

  <h1>Testing custom checkboxes</h1>
  <input-checkbox label="First checkbox" my-id="first" checked.bind="first"></input-checkbox>
  <input-checkbox label="Second checkbox" my-id="second" checked.bind="second"></input-checkbox>
  <div>
    <p>Debug</p>
    <p>First checkbox: ${first}</p>
    <p>Second checkbox: ${second}</p>

  </div>
</template>

## app.js
export class App {
  first = false;
  second = false;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .panel {
        border: 1px solid black;
      }
      .panel-heading {
        background: lightblue;
        color: white;
        border-bottom: 1px solid black;
        padding: 3px;
        font-size: 20px;
      }
      .panel-body {
        padding: 3px;
      }
    </style>
  </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>

## input-checkbox.html
<template>
	<div class="form-check">
		<input type="checkbox" id.bind="myId" checked.bind="checked" class="form-check-input">
		<label style="color: blue" class="form-check-label" for.bind="myId">${label}</label>
		<span style="color:red">(my ID should be "${myId}")</span>
	</div>
</template>

## input-checkbox.js
import { bindable, bindingMode } from 'aurelia-framework';

export class InputCheckbox {
	@bindable myId;
	@bindable label;
	@bindable({ defaultBindingMode: bindingMode.twoWay }) checked;
}

	<template>
	<require from='input-checkbox'></require>

	<h1>Testing custom checkboxes</h1>
	<input-checkbox label="First checkbox" my-id="first" checked.bind="first"></input-checkbox>
	<input-checkbox label="Second checkbox" my-id="second" checked.bind="second"></input-checkbox>
	<div>
	<p>Debug</p>
	<p>First checkbox: ${first}</p>
	<p>Second checkbox: ${second}</p>

	</div>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.panel {
	border: 1px solid black;
	}
	.panel-heading {
	background: lightblue;
	color: white;
	border-bottom: 1px solid black;
	padding: 3px;
	font-size: 20px;
	}
	.panel-body {
	padding: 3px;
	}
	</style>
	</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>
	<div class="form-check">
	<input type="checkbox" id.bind="myId" checked.bind="checked" class="form-check-input">
	<label style="color: blue" class="form-check-label" for.bind="myId">${label}</label>
	<span style="color:red">(my ID should be "${myId}")</span>
	</div>
	</template>
	import { bindable, bindingMode } from 'aurelia-framework';

	export class InputCheckbox {
	@bindable myId;
	@bindable label;
	@bindable({ defaultBindingMode: bindingMode.twoWay }) checked;
	}