jdanyow/app.html

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

  <button click.delegate="show()">Show</button>
  <elem if.bind="item.visible" item.bind="item"></elem>
</template>

## app.js

export class App {
  item = { visible: true, name: 'apple' };

  show() {
    this.item.visible = true;
  }
}

## elem.html

<template>
  <div repeat.for="item of items">
    <button click.delegate="$parent.hide(item)">Hide</button>
    ${item.name}
  </div>
</template>

## elem.js

import { customElement, bindable } from 'aurelia-framework';

// set this to true to "fix" the bug
const USE_NEXT_TICK = false;

@customElement('elem')
export class Elem {
  @bindable item;
  items;

  itemChanged() {
    this.items = [this.item];
  }

  hide(item) {
    this.items = [this.item];

    if (USE_NEXT_TICK) {
      setTimeout(() => { item.visible = false; }, 0);
    } else {
      item.visible = false;
    }
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <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>

## main.js
import {If} from 'aurelia-templating-resources';

If.prototype.valueChanged = function(newValue) {
  if (!newValue) {
    if (this.view !== null && this.showing) {
      //this.taskQueue.queueMicroTask(() => {
        let viewOrPromise = this.viewSlot.remove(this.view);
        if (viewOrPromise instanceof Promise) {
          viewOrPromise.then(() => this.view.unbind());
        } else {
          this.view.unbind();
        }
      //});
    }

    this.showing = false;
    return;
  }

  if (this.view === null) {
    this.view = this.viewFactory.create();
  }

  if (!this.view.isBound) {
    this.view.bind(this.bindingContext, this.overrideContext);
  }

  if (!this.showing) {
    this.showing = true;
    this.viewSlot.add(this.view);
  }
}


export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(() => aurelia.setRoot());
}
	<template>
	<require from="elem"></require>

	<button click.delegate="show()">Show</button>
	<elem if.bind="item.visible" item.bind="item"></elem>
	</template>

	export class App {
	item = { visible: true, name: 'apple' };

	show() {
	this.item.visible = true;
	}
	}

	<template>
	<div repeat.for="item of items">
	<button click.delegate="$parent.hide(item)">Hide</button>
	${item.name}
	</div>
	</template>

	import { customElement, bindable } from 'aurelia-framework';

	// set this to true to "fix" the bug
	const USE_NEXT_TICK = false;

	@customElement('elem')
	export class Elem {
	@bindable item;
	items;

	itemChanged() {
	this.items = [this.item];
	}

	hide(item) {
	this.items = [this.item];

	if (USE_NEXT_TICK) {
	setTimeout(() => { item.visible = false; }, 0);
	} else {
	item.visible = false;
	}
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<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>
	import {If} from 'aurelia-templating-resources';

	If.prototype.valueChanged = function(newValue) {
	if (!newValue) {
	if (this.view !== null && this.showing) {
	//this.taskQueue.queueMicroTask(() => {
	let viewOrPromise = this.viewSlot.remove(this.view);
	if (viewOrPromise instanceof Promise) {
	viewOrPromise.then(() => this.view.unbind());
	} else {
	this.view.unbind();
	}
	//});
	}

	this.showing = false;
	return;
	}

	if (this.view === null) {
	this.view = this.viewFactory.create();
	}

	if (!this.view.isBound) {
	this.view.bind(this.bindingContext, this.overrideContext);
	}

	if (!this.showing) {
	this.showing = true;
	this.viewSlot.add(this.view);
	}
	}


	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(() => aurelia.setRoot());
	}