Skip to content

Instantly share code, notes, and snippets.

@RichTeaTime

RichTeaTime/app.html

Created March 3, 2017 13:08
Show Gist options
  • Save RichTeaTime/29c33d2954d53945a0361eca79666e39 to your computer and use it in GitHub Desktop.
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:[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-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]": {
"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]"
},
"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]",
"ieee754": "npm:[email protected]",
"is-array": "npm:[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]",
"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 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