Skip to content

Instantly share code, notes, and snippets.

@RichTeaTime

RichTeaTime/app.html

Created March 3, 2017 13:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RichTeaTime/29c33d2954d53945a0361eca79666e39 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save RichTeaTime/29c33d2954d53945a0361eca79666e39 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Test - if.bind and ref
Raw
app.html
<template>
ROOT
<div if.bind="showApp" ref="theelement">
This is the element.
</div>
</template>
Raw
app.js
import {inject, TaskQueue} from 'aurelia-framework';
@inject(TaskQueue, Element)
export class App {
showApp = false;
constructor(taskQueue, element) {
this.taskQueue = taskQueue;
this.element = element;
}
activate() {
this.element.innerHTML += "Before " + this.theelement + "<br />";
this.showApp = true;
this.element.innerHTML += "After " + this.theelement + "<br />";
var self = this;
this.taskQueue.queueTask( function() {
self.element.innerHTML += "Queued " + self.theelement + "<br />";
});
setTimeout(function() {
self.element.innerHTML += "Timeout " + self.theelement + "<br />";
}, 2000);
}
}
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.9.0/jspm_packages/github/*",
"npm:*": "https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.9.0/jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "npm:aurelia-animator-css@1.0.0-beta.1.0.1",
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1",
"aurelia-breeze": "npm:aurelia-breeze@0.13.1",
"aurelia-computed": "npm:aurelia-computed@0.9.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-dialog": "npm:aurelia-dialog@0.5.0",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1",
"aurelia-fetch-client": "npm:aurelia-fetch-client@1.0.0-beta.1",
"aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.1",
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1",
"aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1",
"aurelia-http-client": "npm:aurelia-http-client@1.0.0-beta.1",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1",
"aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.0.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.0.0-beta.1",
"aurelia-router": "npm:aurelia-router@1.0.0-beta.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
"aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1",
"aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.0.1",
"aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.0.1",
"aurelia-validation": "npm:aurelia-validation@0.6.0",
"babel": "npm:babel-core@5.8.34",
"babel-runtime": "npm:babel-runtime@5.8.34",
"bootstrap": "github:twbs/bootstrap@3.3.5",
"breeze": "npm:breeze-client@1.5.5",
"clean-css": "npm:clean-css@3.4.8",
"core-js": "npm:core-js@1.2.6",
"css": "github:systemjs/plugin-css@0.1.19",
"fetch": "github:github/fetch@0.10.1",
"moment": "npm:moment@2.10.6",
"numeral": "npm:numeral@1.5.3",
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.5.2"
},
"github:jspm/nodelibs-events@0.1.1": {
"events": "npm:events@1.0.2"
},
"github:jspm/nodelibs-http@1.7.1": {
"Base64": "npm:Base64@0.2.1",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"github:jspm/nodelibs-https@0.1.0": {
"https-browserify": "npm:https-browserify@0.0.0"
},
"github:jspm/nodelibs-os@0.1.0": {
"os-browserify": "npm:os-browserify@0.1.2"
},
"github:jspm/nodelibs-path@0.1.0": {
"path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.2": {
"process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-stream@0.1.0": {
"stream-browserify": "npm:stream-browserify@1.0.0"
},
"github:jspm/nodelibs-url@0.1.0": {
"url": "npm:url@0.10.3"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"github:twbs/bootstrap@3.3.5": {
"jquery": "github:components/jquery@2.1.4"
},
"npm:amdefine@1.0.0": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"module": "github:jspm/nodelibs-module@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:aurelia-animator-css@1.0.0-beta.1.0.1": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1"
},
"npm:aurelia-binding@1.0.0-beta.1.0.1": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-bootstrapper@1.0.0-beta.1": {
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1",
"aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.1",
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1",
"aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1",
"aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.0.1",
"aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1",
"aurelia-router": "npm:aurelia-router@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
"aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1",
"aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.0.1",
"aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.0.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-breeze@0.13.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-http-client": "npm:aurelia-http-client@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
"breeze": "npm:breeze-client@1.5.5"
},
"npm:aurelia-computed@0.9.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1"
},
"npm:aurelia-dependency-injection@1.0.0-beta.1": {
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-dialog@0.5.0": {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.0.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
"text": "github:systemjs/plugin-text@0.0.2"
},
"npm:aurelia-event-aggregator@1.0.0-beta.1": {
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1"
},
"npm:aurelia-fetch-client@1.0.0-beta.1": {
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-framework@1.0.0-beta.1.0.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-history-browser@1.0.0-beta.1": {
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-http-client@1.0.0-beta.1": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-loader-default@1.0.0-beta.1.0.1": {
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1"
},
"npm:aurelia-loader@1.0.0-beta.1": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1"
},
"npm:aurelia-logging-console@1.0.0-beta.1": {
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1"
},
"npm:aurelia-metadata@1.0.0-beta.1": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-pal-browser@1.0.0-beta.1": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1"
},
"npm:aurelia-route-recognizer@1.0.0-beta.1": {
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-router@1.0.0-beta.1": {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1",
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-task-queue@1.0.0-beta.1": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1"
},
"npm:aurelia-templating-binding@1.0.0-beta.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1"
},
"npm:aurelia-templating-resources@1.0.0-beta.1.0.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-templating-router@1.0.0-beta.1.0.1": {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"aurelia-router": "npm:aurelia-router@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1"
},
"npm:aurelia-templating@1.0.0-beta.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1",
"core-js": "npm:core-js@1.2.6"
},
"npm:aurelia-validation@0.6.0": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.1",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1"
},
"npm:babel-runtime@5.8.34": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:buffer@3.5.2": {
"base64-js": "npm:base64-js@0.0.8",
"ieee754": "npm:ieee754@1.1.6",
"is-array": "npm:is-array@1.0.1"
},
"npm:clean-css@3.4.8": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"commander": "npm:commander@2.8.1",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"http": "github:jspm/nodelibs-http@1.7.1",
"https": "github:jspm/nodelibs-https@0.1.0",
"os": "github:jspm/nodelibs-os@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"source-map": "npm:source-map@0.4.4",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:commander@2.8.1": {
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"events": "github:jspm/nodelibs-events@0.1.1",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"graceful-readlink": "npm:graceful-readlink@1.0.1",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:core-js@1.2.6": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.2": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:graceful-readlink@1.0.1": {
"fs": "github:jspm/nodelibs-fs@0.1.2"
},
"npm:https-browserify@0.0.0": {
"http": "github:jspm/nodelibs-http@1.7.1"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:moment@2.10.6": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:numeral@1.5.3": {
"fs": "github:jspm/nodelibs-fs@0.1.2"
},
"npm:os-browserify@0.1.2": {
"os": "github:jspm/nodelibs-os@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:punycode@1.3.2": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:readable-stream@1.1.13": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.2",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.2",
"stream-browserify": "npm:stream-browserify@1.0.0",
"string_decoder": "npm:string_decoder@0.10.31"
},
"npm:source-map@0.4.4": {
"amdefine": "npm:amdefine@1.0.0",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:stream-browserify@1.0.0": {
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"readable-stream": "npm:readable-stream@1.1.13"
},
"npm:string_decoder@0.10.31": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:url@0.10.3": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"punycode": "npm:punycode@1.3.2",
"querystring": "npm:querystring@0.2.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="styles.css">
</head>
<body aurelia-app="main">
<script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/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());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment