jdanyow/app.html

## app.html
<template>
  <button click.delegate="toggleLine()">toggleLine</button><br/>
  <svg width="100" height="100">
    <line
      if.bind="line"
      x1.bind="line.sx"
      y1.bind="line.sy"
      x2.bind="line.ex"
      y2.bind="line.ey" stroke="black"></line>
  </svg>
</template>

## app.js
import {TaskQueue} from 'aurelia-task-queue';
import {BehaviorPropertyObserver} from 'aurelia-templating';

TaskQueue.prototype.flushing = false;
TaskQueue.prototype.flushMicroTaskQueue = function() {
  let queue = this.microTaskQueue;
  let capacity = this.microTaskQueueCapacity;
  let index = 0;
  let task;

  try {
    this.flushing = true;
    while (index < queue.length) {
      task = queue[index];
      task.call();
      index++;

      // Prevent leaking memory for long chains of recursive calls to `queueMicroTask`.
      // If we call `queueMicroTask` within a MicroTask scheduled by `queueMicroTask`, the queue will
      // grow, but to avoid an O(n) walk for every MicroTask we execute, we don't
      // shift MicroTasks off the queue after they have been executed.
      // Instead, we periodically shift 1024 MicroTasks off the queue.
      if (index > capacity) {
        // Manually shift all values starting at the index back to the
        // beginning of the queue.
        for (let scan = 0, newLength = queue.length - index; scan < newLength; scan++) {
          queue[scan] = queue[scan + index];
        }

        queue.length -= index;
        index = 0;
      }
    }
  } catch (error) {
    onError(error, task);
  } finally {
    this.flushing = false;
  }

  queue.length = 0;
};


BehaviorPropertyObserver.prototype.setValue = function(newValue) {
  let oldValue = this.currentValue;

  if (oldValue !== newValue) {
    this.oldValue = oldValue;
    this.currentValue = newValue;

    if (this.publishing && this.notqueued) {
      if (this.taskQueue.flushing) {
        this.call();
      } else {
        this.notqueued = false;
        this.taskQueue.queueMicroTask(this);
      }
    }
  }
};


export class App {
  toggleLine() {
    if (this.line) {
      this.line = null;
    } else {
      this.line = {
        sx: 10, sy: 20,
        ex: 90, ey: 90
      }
    }
  }

}

## 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://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>
	<button click.delegate="toggleLine()">toggleLine</button><br/>
	<svg width="100" height="100">
	<line
	if.bind="line"
	x1.bind="line.sx"
	y1.bind="line.sy"
	x2.bind="line.ex"
	y2.bind="line.ey" stroke="black"></line>
	</svg>
	</template>
	import {TaskQueue} from 'aurelia-task-queue';
	import {BehaviorPropertyObserver} from 'aurelia-templating';

	TaskQueue.prototype.flushing = false;
	TaskQueue.prototype.flushMicroTaskQueue = function() {
	let queue = this.microTaskQueue;
	let capacity = this.microTaskQueueCapacity;
	let index = 0;
	let task;

	try {
	this.flushing = true;
	while (index < queue.length) {
	task = queue[index];
	task.call();
	index++;

	// Prevent leaking memory for long chains of recursive calls to `queueMicroTask`.
	// If we call `queueMicroTask` within a MicroTask scheduled by `queueMicroTask`, the queue will
	// grow, but to avoid an O(n) walk for every MicroTask we execute, we don't
	// shift MicroTasks off the queue after they have been executed.
	// Instead, we periodically shift 1024 MicroTasks off the queue.
	if (index > capacity) {
	// Manually shift all values starting at the index back to the
	// beginning of the queue.
	for (let scan = 0, newLength = queue.length - index; scan < newLength; scan++) {
	queue[scan] = queue[scan + index];
	}

	queue.length -= index;
	index = 0;
	}
	}
	} catch (error) {
	onError(error, task);
	} finally {
	this.flushing = false;
	}

	queue.length = 0;
	};


	BehaviorPropertyObserver.prototype.setValue = function(newValue) {
	let oldValue = this.currentValue;

	if (oldValue !== newValue) {
	this.oldValue = oldValue;
	this.currentValue = newValue;

	if (this.publishing && this.notqueued) {
	if (this.taskQueue.flushing) {
	this.call();
	} else {
	this.notqueued = false;
	this.taskQueue.queueMicroTask(this);
	}
	}
	}
	};


	export class App {
	toggleLine() {
	if (this.line) {
	this.line = null;
	} else {
	this.line = {
	sx: 10, sy: 20,
	ex: 90, ey: 90
	}
	}
	}

	}
	<!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://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>