Skip to content

Instantly share code, notes, and snippets.

@jussimattila

jussimattila/app.html

Last active March 21, 2016 23:21
Show Gist options
  • Save jussimattila/e88ade5198924c5d2cf2 to your computer and use it in GitHub Desktop.
Save jussimattila/e88ade5198924c5d2cf2 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Plunker v0.10.1
Raw
app.html
<template>
<require from="./repeater"></require>
<h3>Remove the first repeater (0), alert should show 'Detached content 0' but shows 'Detached content 1'.</h3>
<div>
To fix the issue, open repeater.js, and uncomment 'detached() {}'.
</div>
<br>
<div repeat.for="repeaterId of repeaterIds">
<repeater repeater-id.bind="repeaterId"></repeater>
<button click.trigger="$parent.removeRepeaterId(repeaterId)">Remove me</button>
</div>
</template>
Raw
app.js
export class App {
repeaterIds = [0, 1];
removeRepeaterId(repeaterId) {
let index = this.repeaterIds.indexOf(repeaterId);
this.repeaterIds.splice(index, 1);
}
}
Raw
config.js
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"ignore": ["github:*", "npm:*"],
"stage": 0,
"optional": []
},
paths: {
"github:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.10.1/jspm_packages/github/*",
"npm:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.10.1/jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "npm:[email protected]",
"aurelia-binding": "npm:[email protected]",
"aurelia-bootstrapper": "npm:[email protected]",
"aurelia-breeze": "npm:[email protected]",
"aurelia-computed": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-dialog": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-fetch-client": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-history-browser": "npm:[email protected]",
"aurelia-http-client": "npm:[email protected]",
"aurelia-i18n": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-route-recognizer": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-binding": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"aurelia-templating-router": "npm:[email protected]",
"aurelia-validation": "npm:[email protected]",
"babel": "npm:[email protected]",
"babel-runtime": "npm:[email protected]",
"bootstrap": "github:twbs/[email protected]",
"breeze": "npm:[email protected]",
"clean-css": "npm:[email protected]",
"core-js": "npm:[email protected]",
"css": "github:systemjs/[email protected]",
"fetch": "github:github/[email protected]",
"moment": "npm:[email protected]",
"numeral": "npm:[email protected]",
"github:jspm/[email protected]": {
"assert": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"buffer": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"events": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"Base64": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"stream": "github:jspm/[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"github:jspm/[email protected]": {
"https-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"os-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"path-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"process": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"stream-browserify": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"url": "npm:[email protected]"
},
"github:jspm/[email protected]": {
"util": "npm:[email protected]"
},
"github:twbs/[email protected]": {
"jquery": "github:components/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"module": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-history-browser": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-logging-console": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-pal-browser": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-binding": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"aurelia-templating-router": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-http-client": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-pal-browser": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"breeze": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-framework": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"text": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]"
},
"npm:[email protected]": {
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-history": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"Intl.js": "github:andyearnshaw/[email protected]",
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-loader-default": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"aurelia-templating-resources": "npm:[email protected]",
"i18next": "github:i18next/[email protected]"
},
"npm:[email protected]": {
"aurelia-loader": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-metadata": "npm:[email protected]",
"aurelia-path": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-logging": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-path": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-event-aggregator": "npm:[email protected]",
"aurelia-history": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-route-recognizer": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-pal": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-router": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-loader": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-pal": "npm:[email protected]",
"aurelia-path": "npm:[email protected]",
"aurelia-task-queue": "npm:[email protected]",
"core-js": "npm:[email protected]"
},
"npm:[email protected]": {
"aurelia-binding": "npm:[email protected]",
"aurelia-dependency-injection": "npm:[email protected]",
"aurelia-logging": "npm:[email protected]",
"aurelia-metadata": "npm:[email protected]",
"aurelia-templating": "npm:[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"base64-js": "npm:[email protected]",
"child_process": "github:jspm/[email protected]",
"fs": "github:jspm/[email protected]",
"ieee754": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"commander": "npm:[email protected]",
"fs": "github:jspm/[email protected]",
"http": "github:jspm/[email protected]",
"https": "github:jspm/[email protected]",
"os": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"source-map": "npm:[email protected]",
"url": "github:jspm/[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"child_process": "github:jspm/[email protected]",
"events": "github:jspm/[email protected]",
"fs": "github:jspm/[email protected]",
"graceful-readlink": "npm:[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]",
"path": "github:jspm/[email protected]",
"process": "github:jspm/[email protected]",
"systemjs-json": "github:systemjs/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"http": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"fs": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"os": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]",
"core-util-is": "npm:[email protected]",
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"isarray": "npm:[email protected]",
"process": "github:jspm/[email protected]",
"stream-browserify": "npm:[email protected]",
"string_decoder": "npm:[email protected]"
},
"npm:[email protected]": {
"amdefine": "npm:[email protected]",
"process": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"events": "github:jspm/[email protected]",
"inherits": "npm:[email protected]",
"readable-stream": "npm:[email protected]"
},
"npm:[email protected]": {
"buffer": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"assert": "github:jspm/[email protected]",
"punycode": "npm:[email protected]",
"querystring": "npm:[email protected]",
"util": "github:jspm/[email protected]"
},
"npm:[email protected]": {
"inherits": "npm:[email protected]",
"process": "github:jspm/[email protected]"
}
}
});
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.10.1/jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
/*******************************************************************************
* The following two lines enable async/await without using babel's
* "runtime" transformer.
*
* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
*
* Feel free to remove these lines if your plunker doesn't use async/await.
*/
import regeneratorRuntime from 'babel-runtime/regenerator';
window.regeneratorRuntime = regeneratorRuntime;
/******************************************************************************/
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot());
}
Raw
repeater-content.html
<template>
Content ${repeaterId}
</template>
Raw
repeater-content.js
import {bindable} from 'aurelia-framework';
export class RepeaterContent {
@bindable repeaterId;
detached() {
alert(`Detached content ${this.repeaterId}`);
}
}
Raw
repeater.html
<template>
<require from="./repeater-content"></require>
Repeater ${repeaterId}
<repeater-content repeater-id.bind="repeaterId"></repeater-content>
</template>
Raw
repeater.js
import {bindable} from 'aurelia-framework';
export class Repeater {
@bindable repeaterId;
// To fix the issue, uncomment detached() function
//detached() {}
}
Raw
styles.css
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment