Skip to content

Instantly share code, notes, and snippets.

@lukechilds

lukechilds/app.html

Last active May 12, 2016
Embed
What would you like to do?
Aurelia Inconsistent Template Behaviour Fix
<template>
<h1>${message}</h1>
<button click.delegate="addNumber('before')">Add number before</button>
<button click.delegate="addNumber('after')">Add number after</button>
<div>
<span repeat.for="number of numbers">${number}</span>
</div>
</template>
import {inject, ObserverLocator, TaskQueue} from 'aurelia-framework';
@inject(ObserverLocator, TaskQueue)
export class App {
constructor(observerLocator, taskQueue) {
this.message = 'Hello World!';
this.numbers = [];
observerLocator.getArrayObserver(this.numbers).subscribe(() => {
taskQueue.queueTask(() => {
alert(`If you add number after everything should be good now.\n\nIf you add number before elements will be duplicated, after exiting this alert rendering will complete`);
});
});
}
addNumber(location) {
const newNumber = this.numbers.length;
if(location == 'before') {
this.numbers.unshift(newNumber);
} else {
this.numbers.push(newNumber);
}
}
}
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.