CODEWITHSUNDEEP
aureliaaurelia-templating
Mr. Baudin
Mr. Baudin

Reputation: 2254

Creating elements in Aurelia

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.

Upvotes: 1

Views: 981

Answers (1)

qwerty2k
qwerty2k

Reputation: 161

I'm sorry that i won't be able to answer fully, but i believe you will need to use the Aurelia ViewCompiler to compile the fragments of HTML generated so that they are parsed by Aurelia.

Try looking at the following link for more information: How do you use ViewCompiler to manually compile part of the DOM?

Upvotes: 1

Related Questions