Skip to content

Instantly share code, notes, and snippets.

@stoffeastrom

stoffeastrom/app.html

Forked from jdanyow/app.html
Last active February 17, 2017 20:15
Show Gist options
  • Save stoffeastrom/eff66c242a27f2ed97c2eecfbca89dff to your computer and use it in GitHub Desktop.
Save stoffeastrom/eff66c242a27f2ed97c2eecfbca89dff to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist
Raw
app.html
<template>
<require from="test"></require>
<h1>${message}</h1>
<div test.call="onTest()"></div>
</template>
Raw
app.ts
export class App {
message = 'Hello World!';
onTest() {
console.log('correct');
}
}
Raw
config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
'aurelia-binding': 'https://unpkg.com/aurelia-binding/dist/amd/aurelia-binding.js',
'aurelia-bootstrapper': 'https://unpkg.com/aurelia-bootstrapper/dist/amd/aurelia-bootstrapper.js',
'aurelia-dependency-injection': 'https://unpkg.com/aurelia-dependency-injection/dist/amd/aurelia-dependency-injection.js',
'aurelia-event-aggregator': 'https://unpkg.com/aurelia-event-aggregator/dist/amd/aurelia-event-aggregator.js',
'aurelia-framework': 'https://unpkg.com/aurelia-framework/dist/amd/aurelia-framework.js',
'aurelia-history': 'https://unpkg.com/aurelia-history/dist/amd/aurelia-history.js',
'aurelia-history-browser': 'https://unpkg.com/aurelia-history-browser/dist/amd/aurelia-history-browser.js',
'aurelia-loader': 'https://unpkg.com/aurelia-loader/dist/amd/aurelia-loader.js',
'aurelia-loader-default': 'https://unpkg.com/aurelia-loader-default/dist/amd/aurelia-loader-default.js',
'aurelia-logging': 'https://unpkg.com/aurelia-logging/dist/amd/aurelia-logging.js',
'aurelia-logging-console': 'https://unpkg.com/aurelia-logging-console/dist/amd/aurelia-logging-console.js',
'aurelia-metadata': 'https://unpkg.com/aurelia-metadata/dist/amd/aurelia-metadata.js',
'aurelia-pal': 'https://unpkg.com/aurelia-pal/dist/amd/aurelia-pal.js',
'aurelia-pal-browser': 'https://unpkg.com/aurelia-pal-browser/dist/amd/aurelia-pal-browser.js',
'aurelia-path': 'https://unpkg.com/aurelia-path/dist/amd/aurelia-path.js',
'aurelia-polyfills': 'https://unpkg.com/aurelia-polyfills/dist/amd/aurelia-polyfills.js',
'aurelia-router': 'https://unpkg.com/aurelia-router/dist/amd/aurelia-router.js',
'aurelia-route-recognizer': 'https://unpkg.com/aurelia-route-recognizer/dist/amd/aurelia-route-recognizer.js',
'aurelia-task-queue': 'https://unpkg.com/aurelia-task-queue/dist/amd/aurelia-task-queue.js',
'aurelia-templating': 'https://unpkg.com/aurelia-templating/dist/amd/aurelia-templating.js',
'aurelia-templating-binding': 'https://unpkg.com/aurelia-templating-binding/dist/amd/aurelia-templating-binding.js',
'aurelia-templating-resources': 'https://unpkg.com/aurelia-templating-resources/dist/amd',
'aurelia-templating-router': 'https://unpkg.com/aurelia-templating-router/dist/amd',
'typescript': 'https://unpkg.com/typescript@2.2.0/lib/typescript.js'
},
packages: {
'.': {
defaultExtension: 'ts'
},
'aurelia-templating-resources': { main: 'aurelia-templating-resources.js' },
'aurelia-templating-router': { main: 'aurelia-templating-router.js' }
}
});
Raw
index.html
<!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://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
function patchDefaultLoader(DefaultLoader) {
// fix issue where the map function was using `System.map[id] = source`
// https://github.com/aurelia/loader-default/blob/1.0.0/src/index.js#L222
DefaultLoader.prototype.map = function(id, source) {
// System.map[id] = source; // <--- original
System.config({ map: { [id]: source } }); // <--- fix
};
}
System.import('aurelia-loader-default')
.then(({ DefaultLoader }) => patchDefaultLoader(DefaultLoader))
.then(() => System.import('aurelia-bootstrapper'));
</script>
</body>
</html>
Raw
test.ts
import { customAttribute, bindable } from 'aurelia-framework';
@customAttribute('test')
export class Test {
@bindable({ primaryProperty: true }) foo = () => { console.log('wrong'); };
bind() {
setTimeout(() => {
this.foo();
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment