I'm trying to create an Aurelia element inside of another element. I'm using the docking framework from phosphor and when I dynamically create a panel I want to add a component which I've build using Aurelia.
For example: I have a very simple logging component:
Logging.html
<template>
<h1>Logging....</h1>
</template>
Logging.ts:
export class Logging {
constructor() {
console.log('Logging constructor')
}
}
The component works as expected when I "just put it on the page".
Now inside of some method which creates the phosphor Widget I have something like this:
var widget = new Widget();
widget.title = "Got Logs?";
var contentElement = document.createElement('logging');
widget.node.appendChild(contentElement);
panel.insertBottom(widget);
This code, given a phosphor panel, creates a Widget, creates an element which looks like: <logging></logging> and appends it to the widget's inner node. The resulting "DOM" is correct but aurelia does not render the element.
I have also tried using the TemplatingEngine like so:
import { inject, TemplatingEngine } from 'aurelia-framework';
@inject(TemplatingEngine)
export class AureliaRoot {
constructor(templatingEngine) { }
attached() {
var contentElement = document.createElement("logging"),
el = document.getElementById("my-element");
el.appendChild(contentElement);
templatingEngine.enhance({element: el, bindingContext: {}});
}
}
But this doesn't seem to work, although I doubt I'm using it right and I think I might need to use compile, really not sure there.
Any insights would be appreciated.