TylerJPresley/app.html

## app.html
<template>
  <require from="./page"></require>

  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <page></page>
      </div>
    </div>
  </div>
</template>

## app.js
export class App {

}

## array-filter.js
export class arrayFilterValueConverter {
  toView(array, prop, filter) {
    if (!array || !prop || !filter) {
      return array;
    }
    return array.filter((a) => a[prop] === filter);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
    <script src="https://use.fontawesome.com/33a3e561f9.js"></script>
  </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>

## page.html
<template>
  <require from='./array-filter'></require>

  <h5 class="mt-1">${title}</h5>
  <table class="table">
  <thead>
    <tr>
      <th width="5%">
        <label class="form-check-inline">
          <input class="form-check-input" type="checkbox" click.delegate="checkAll($event.target.checked)">
        </label>
      </th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="row of rows | arrayFilter:'visible':true">
      <td>
        <label class="form-check-inline">
          <input class="form-check-input" type="checkbox" change.delegate="checkChanged()" checked.two-way="row.checked">
        </label>
      </td>
      <td>${row.description}</td>
    </tr>
  </tbody>
  </table>
  <hr class="mt-0 mb-0" />
  <p class="mt-1">Selected rows:</p>
  <ul>
    <li repeat.for="row of rows | arrayFilter:'checked':true & signal:'checkedBinding'">${row.id} - ${row.description}</li>
  </ul>
</template>

## page.js
import { inject } from 'aurelia-framework';
import { BindingSignaler } from 'aurelia-templating-resources';

@inject(BindingSignaler)
export class Page {
  title = 'Page data';

  rows = [
    {id: 1, description: 'Some row', visible: true, checked: false},
    {id: 2, description: 'Other row', visible: true, checked: false},
    {id: 3, description: 'Different row', visible: false, checked: false}
  ];

  constructor(signaler) {
    this.signaler = signaler;
  }

  checkChanged() {
    // Some more logic to see if last one checked to uncheck all and other stuff that may come up
    this.signaler.signal('checkedBinding');
  }

  checkAll(checked) {
    for (let row of this.rows) {
      if (row.visible) {
        row.checked = checked;
      }
    }
    this.signaler.signal('checkedBinding');
    return true;
  }
}
	<template>
	<require from="./page"></require>

	<div class="container-fluid">
	<div class="row">
	<div class="col-xs-12">
	<page></page>
	</div>
	</div>
	</div>
	</template>
	export class arrayFilterValueConverter {
	toView(array, prop, filter) {
	if (!array \|\| !prop \|\| !filter) {
	return array;
	}
	return array.filter((a) => a[prop] === filter);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
	<script src="https://use.fontawesome.com/33a3e561f9.js"></script>
	</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>
	<require from='./array-filter'></require>

	<h5 class="mt-1">${title}</h5>
	<table class="table">
	<thead>
	<tr>
	<th width="5%">
	<label class="form-check-inline">
	<input class="form-check-input" type="checkbox" click.delegate="checkAll($event.target.checked)">
	</label>
	</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr repeat.for="row of rows \| arrayFilter:'visible':true">
	<td>
	<label class="form-check-inline">
	<input class="form-check-input" type="checkbox" change.delegate="checkChanged()" checked.two-way="row.checked">
	</label>
	</td>
	<td>${row.description}</td>
	</tr>
	</tbody>
	</table>
	<hr class="mt-0 mb-0" />
	<p class="mt-1">Selected rows:</p>
	<ul>
	<li repeat.for="row of rows \| arrayFilter:'checked':true & signal:'checkedBinding'">${row.id} - ${row.description}</li>
	</ul>
	</template>
	import { inject } from 'aurelia-framework';
	import { BindingSignaler } from 'aurelia-templating-resources';

	@inject(BindingSignaler)
	export class Page {
	title = 'Page data';

	rows = [
	{id: 1, description: 'Some row', visible: true, checked: false},
	{id: 2, description: 'Other row', visible: true, checked: false},
	{id: 3, description: 'Different row', visible: false, checked: false}
	];

	constructor(signaler) {
	this.signaler = signaler;
	}

	checkChanged() {
	// Some more logic to see if last one checked to uncheck all and other stuff that may come up
	this.signaler.signal('checkedBinding');
	}

	checkAll(checked) {
	for (let row of this.rows) {
	if (row.visible) {
	row.checked = checked;
	}
	}
	this.signaler.signal('checkedBinding');
	return true;
	}
	}