lebolo/app.html

## app.html
<template>
  <require from="./item"></require>
  <require from="./hideCompletedValueConverter"></require>
  <ol>
    <li>Click the first checkbox</li>
    <li>Notice that isCompleted bindings disagree with each other.</li>
    <li>Go to item.js and uncomment bind().</li>
    <li>Click the first checkbox</li>
    <li>Notice the issue is gone...</li>
    <li>What is going on?</li>
  </ol>
  <item item.bind="item" repeat.for="item of list | hideCompleted"></item>
</template>

## app.js
export class App {
  list = [
      {
        isCompleted: false
      },
      {
        isCompleted: false
      }
    ];


  toggleCompleted(item) {
    this.list = this.list.map(_item => {
      return _item !== item ? _item : {
        isCompleted: !item.isCompleted
      }
    });
  }
}

## hideCompletedValueConverter.js
export class HideCompletedValueConverter {
  toView(arr) {
    return arr.filter(item => !item.isCompleted);
  }
}


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

## item.html
<template>
  ${item.isCompleted}
    <input type="checkbox" checked.one-way="item.isCompleted"
    change.trigger="app.toggleCompleted(item)">
</template>

## item.js
import {bindable, inject} from 'aurelia-framework';
import {App} from './app';

@inject(App)
export class ItemCustomElement {
  @bindable item;

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

  // bind() {}
}
	<template>
	<require from="./item"></require>
	<require from="./hideCompletedValueConverter"></require>
	<ol>
	<li>Click the first checkbox</li>
	<li>Notice that isCompleted bindings disagree with each other.</li>
	<li>Go to item.js and uncomment bind().</li>
	<li>Click the first checkbox</li>
	<li>Notice the issue is gone...</li>
	<li>What is going on?</li>
	</ol>
	<item item.bind="item" repeat.for="item of list \| hideCompleted"></item>
	</template>
	export class App {
	list = [
	{
	isCompleted: false
	},
	{
	isCompleted: false
	}
	];


	toggleCompleted(item) {
	this.list = this.list.map(_item => {
	return _item !== item ? _item : {
	isCompleted: !item.isCompleted
	}
	});
	}
	}
	export class HideCompletedValueConverter {
	toView(arr) {
	return arr.filter(item => !item.isCompleted);
	}
	}
	<!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>
	${item.isCompleted}
	<input type="checkbox" checked.one-way="item.isCompleted"
	change.trigger="app.toggleCompleted(item)">
	</template>
	import {bindable, inject} from 'aurelia-framework';
	import {App} from './app';

	@inject(App)
	export class ItemCustomElement {
	@bindable item;

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

	// bind() {}
	}