<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurelia</title>
</head>
<body aurelia-app="">
<div class="splash">
<div class="message">Loading... Check the console.</div>
</div>
<!-- jspm.io seems to be down surprisingly often! -->
<script data-require="jspm@0.16.7" data-semver="0.16.7" src="https://jspm.io/system@0.16.7.js"></script>
<!-- Maybe download and use from plunkr -->
<!--
<script data-require="Aurelia@0.13.0" data-semver="0.13.0" src="https://rawgit.com/distros/aurelia/0.13.0/aurelia.js"></script>
-->
<script src="https://rawgit.com/distros/aurelia/master/aurelia.js"></script>
<script src="config.js"></script>
<script>
System.import("aurelia-bootstrapper");
</script>
</body>
</html>
export class App{
constructor(){
}
}
<template>
<require from='./panel'></require>
<panel-elem></panel-elem>
</template>
System.config({
"baseURL": ".",
"transpiler": "babel",
"babelOptions": {
"stage": 0
},
"paths": {
"*": "*.js"
}
});
System.config({
"map": {
"aurelia": "https://rawgit.com/distros/aurelia/0.13.0/aurelia",
"aurelia-animator-css": "github:aurelia/animator-css@0.2.0",
"aurelia-bootstrapper": "github:aurelia/bootstrapper@0.12.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-framework": "github:aurelia/framework@0.11.0",
"aurelia-http-client": "github:aurelia/http-client@0.8.0",
"aurelia-router": "github:aurelia/router@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.11.0",
"core-js": "npm:core-js@0.9.5",
"babel": "npm:babel-core@5.2.3",
"css": "github:systemjs/plugin-css@0.1.10",
"github:aurelia/animator-css@0.2.0": {
"aurelia-templating": "github:aurelia/templating@0.11.0"
},
"github:aurelia/binding@0.6.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-metadata": "github:aurelia/metadata@0.5.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.4.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/bootstrapper@0.12.0": {
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.4.0",
"aurelia-framework": "github:aurelia/framework@0.11.0",
"aurelia-history": "github:aurelia/history@0.4.0",
"aurelia-history-browser": "github:aurelia/history-browser@0.4.0",
"aurelia-loader-default": "github:aurelia/loader-default@0.7.0",
"aurelia-logging-console": "github:aurelia/logging-console@0.4.0",
"aurelia-router": "github:aurelia/router@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.11.0",
"aurelia-templating-binding": "github:aurelia/templating-binding@0.11.0",
"aurelia-templating-resources": "github:aurelia/templating-resources@0.11.0",
"aurelia-templating-router": "github:aurelia/templating-router@0.12.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/dependency-injection@0.7.0": {
"aurelia-logging": "github:aurelia/logging@0.4.0",
"aurelia-metadata": "github:aurelia/metadata@0.5.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/framework@0.11.0": {
"aurelia-binding": "github:aurelia/binding@0.6.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-loader": "github:aurelia/loader@0.6.0",
"aurelia-logging": "github:aurelia/logging@0.4.0",
"aurelia-metadata": "github:aurelia/metadata@0.5.0",
"aurelia-path": "github:aurelia/path@0.6.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.4.0",
"aurelia-templating": "github:aurelia/templating@0.11.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/history-browser@0.4.0": {
"aurelia-history": "github:aurelia/history@0.4.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/http-client@0.8.0": {
"aurelia-path": "github:aurelia/path@0.6.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/loader-default@0.7.0": {
"aurelia-loader": "github:aurelia/loader@0.6.0",
"aurelia-metadata": "github:aurelia/metadata@0.5.0"
},
"github:aurelia/loader@0.6.0": {
"aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
"aurelia-path": "github:aurelia/path@0.6.0",
"core-js": "npm:core-js@0.9.5",
"webcomponentsjs": "github:webcomponents/webcomponentsjs@0.6.1"
},
"github:aurelia/metadata@0.5.0": {
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/route-recognizer@0.4.0": {
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/router@0.8.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.4.0",
"aurelia-history": "github:aurelia/history@0.4.0",
"aurelia-path": "github:aurelia/path@0.6.0",
"aurelia-route-recognizer": "github:aurelia/route-recognizer@0.4.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/templating-binding@0.11.0": {
"aurelia-binding": "github:aurelia/binding@0.6.0",
"aurelia-logging": "github:aurelia/logging@0.4.0",
"aurelia-templating": "github:aurelia/templating@0.11.0"
},
"github:aurelia/templating-resources@0.11.0": {
"aurelia-binding": "github:aurelia/binding@0.6.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-logging": "github:aurelia/logging@0.4.0",
"aurelia-templating": "github:aurelia/templating@0.11.0",
"core-js": "npm:core-js@0.9.5"
},
"github:aurelia/templating-router@0.12.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-metadata": "github:aurelia/metadata@0.5.0",
"aurelia-path": "github:aurelia/path@0.6.0",
"aurelia-router": "github:aurelia/router@0.8.0",
"aurelia-templating": "github:aurelia/templating@0.11.0"
},
"github:aurelia/templating@0.11.0": {
"aurelia-binding": "github:aurelia/binding@0.6.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.7.0",
"aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
"aurelia-loader": "github:aurelia/loader@0.6.0",
"aurelia-logging": "github:aurelia/logging@0.4.0",
"aurelia-metadata": "github:aurelia/metadata@0.5.0",
"aurelia-path": "github:aurelia/path@0.6.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.4.0",
"core-js": "npm:core-js@0.9.5"
},
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.2.1"
},
"github:jspm/nodelibs-events@0.1.0": {
"events-browserify": "npm:events-browserify@0.0.1"
},
"github:jspm/nodelibs-http@1.7.1": {
"Base64": "npm:Base64@0.2.1",
"events": "github:jspm/nodelibs-events@0.1.0",
"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.1": {
"process": "npm:process@0.10.1"
},
"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:systemjs/plugin-css@0.1.10": {
"clean-css": "npm:clean-css@3.1.9",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0"
},
"github:twbs/bootstrap@3.3.4": {
"jquery": "github:components/jquery@2.1.3"
},
"npm:amdefine@0.1.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.1"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:buffer@3.2.1": {
"base64-js": "npm:base64-js@0.0.8",
"ieee754": "npm:ieee754@1.1.4",
"is-array": "npm:is-array@1.0.1"
},
"npm:clean-css@3.1.9": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"commander": "npm:commander@2.6.0",
"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.1",
"source-map": "npm:source-map@0.1.43",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:commander@2.6.0": {
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"events": "github:jspm/nodelibs-events@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:core-js@0.9.5": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:core-util-is@1.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:events-browserify@0.0.1": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:font-awesome@4.3.0": {
"css": "github:systemjs/plugin-css@0.1.10"
},
"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: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.1"
},
"npm:punycode@1.3.2": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:readable-stream@1.1.13": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.1",
"events": "github:jspm/nodelibs-events@0.1.0",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"stream-browserify": "npm:stream-browserify@1.0.0",
"string_decoder": "npm:string_decoder@0.10.31",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:source-map@0.1.43": {
"amdefine": "npm:amdefine@0.1.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:stream-browserify@1.0.0": {
"events": "github:jspm/nodelibs-events@0.1.0",
"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.1"
}
}
});
import { useShadowDOM, customElement } from 'aurelia-templating';
export { PanelModule };
@useShadowDOM
@customElement('panel-elem')
class PanelModule {}
<template>
<require from="./panel.css" as="scoped"></require>
<require from="./widget"></require>
<require from="./own-context"></require>
<widget-elem own-context>
<content>
some content
</content>
</widget-elem>
</template>
import { useShadowDOM, customElement } from 'aurelia-templating';
export { WidgetModule };
@useShadowDOM
@customElement('widget-elem')
class WidgetModule {}
<template>
<require from="./widget.css" as="scoped"></require>
<div id="thing">
<slot></slot>
</div
</template>
import { inject, templateController, BoundViewFactory, ViewSlot } from 'aurelia-framework';
import { createOverrideContext } from 'aurelia-binding';
// from https://github.com/aurelia/templating/issues/411
@templateController
@inject(BoundViewFactory, ViewSlot)
class OwnContextCustomAttribute {
constructor(factory, slot) {
this.factory = factory;
this.slot = slot;
}
bind(bindingContext, overrideContext) {
let newContext = { };
overrideContext = createOverrideContext(newContext, overrideContext);
if (!this.view) {
this.view = this.factory.create();
this.view.bind(newContext, overrideContext);
this.slot.add(this.view);
} else {
this.view.bind(newContext, overrideContext);
}
}
unbind() {
if (this.view)
this.view.unbind();
}
}