Skip to content

Instantly share code, notes, and snippets.

@RichTeaTime

RichTeaTime/app.html

Last active April 19, 2018 16:03
Show Gist options
  • Save RichTeaTime/d7d9e7c7080f581f8e81b888268a2f11 to your computer and use it in GitHub Desktop.
Save RichTeaTime/d7d9e7c7080f581f8e81b888268a2f11 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Test - propertyChange
Raw
app.html
<template>
<require from="./component"></require>
<h3>Not calling the propertyChanged handler</h3>
<component propone="Hugh" update-on-bind.bind="false"></component>
<h3>Calling the propertyChanged handler manually</h3>
<component propone="Juan" update-on-bind.bind="true"></component>
</template>
Raw
app.js
import {inject, TaskQueue} from 'aurelia-framework';
@inject(TaskQueue, Element)
export class App {
}
Raw
component.html
<template>
<div>One is ${propone}</div>
<div>Two is ${proptwo}</div>
</template>
Raw
component.js
import {bindable} from 'aurelia-framework';
export class Component
{
@bindable propone = "one";
@bindable proptwo = "two";
@bindable updateOnBind = false;
bind() {
console.log("Propone prebind " + this.propone)
console.log("Proptwo prebind " + this.proptwo)
// ? Should I need this to initialise proptwo, or should it be done before now?
if( this.updateOnBind )
this.proponeChanged(this.propone);
console.log("Propone postbind " + this.propone)
console.log("Proptwo postbind " + this.proptwo)
}
proponeChanged(val){
this.proptwo = "something really complex involving " + val;
console.log("propone now " + val);
}
}
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">
<style>component { border:1px solid red; display:block }</style>
</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