Skip to content

Instantly share code, notes, and snippets.

@fabioluz
Created February 10, 2017 13:56
Show Gist options
  • Select an option

  • Save fabioluz/32b97d131a0ed689bd48eb35086c43f2 to your computer and use it in GitHub Desktop.

Select an option

Save fabioluz/32b97d131a0ed689bd48eb35086c43f2 to your computer and use it in GitHub Desktop.
Aurelia Gist
<template>
<button click.delegate="addComponent()">Add Component</button>
</template>
import {inject, Container} from 'aurelia-dependency-injection';
import {TemplatingEngine, ViewSlot, ViewResources, View } from 'aurelia-templating';
@inject(Element, TemplatingEngine)
export class App {
constructor(element, templatingEngine) {
this.element = element;
this.templatingEngine = templatingEngine;
}
addComponent() {
debugger;
let component = document.createElement('div');
component.style.backgroundColor = '#FF0000';
component.innerHTML = '<my-component message="it works!"></my-component>';
this.element.appendChild(component);
this.templatingEngine.enhance(component);
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.globalResources('./my-component');
aurelia.start().then(() => aurelia.setRoot());
}
<template>
<br><br><Br>
${message}
adsfsadf
</template>
import { bindable, customElement } from 'aurelia-framework';
@customElement('my-component')
export class MyComponent {
@bindable message;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment