2016-07-04 6 views
1

Ich versuche, ein Aurelia-Element innerhalb eines anderen Elements zu erstellen. Ich verwende das Docking-Framework von phosphor und wenn ich dynamisch ein Panel erstelle, möchte ich eine Komponente hinzufügen, die ich mit Aurelia gebaut habe.Erstellen von Elementen in Aurelia

Zum Beispiel: Ich habe eine sehr einfache Protokollierungskomponente:

Logging.html

<template> 
    <h1>Logging....</h1> 
</template> 

Logging.ts:

export class Logging { 
    constructor() { 
     console.log('Logging constructor') 
    } 
} 

Die Komponente wie erwartet funktioniert, wenn ich „nur setzen es auf der Seite ".

Jetzt irgendeine Methode in der den Phosphor Widget erzeugt habe ich so etwas wie diese:

var widget = new Widget(); 
widget.title = "Got Logs?"; 
var contentElement = document.createElement('logging'); 
widget.node.appendChild(contentElement); 
panel.insertBottom(widget); 

Diesen Code, eine Leuchtstoffplatte gegeben, erzeugt ein Widget, erstellt ein Element, das wie folgt aussieht: <logging></logging> und fügt es zum inneren Knoten des Widgets. Das resultierende "DOM" ist korrekt, aber aurelia gibt das Element nicht wieder.

Ich habe auch versucht die TemplatingEngine wie mit 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: {}}); 
    } 
} 

Aber dies scheint nicht zu arbeiten, obwohl ich verwende ich es richtig zweifeln, und ich glaube, ich könnte compile verwenden müssen, wirklich da bin ich mir nicht sicher.

Alle Einsichten würden geschätzt werden.

+0

Es hängt davon ab, an welchem ​​Punkt das erstellt wird, denn soweit mein Wissen mit SPA-Frameworks geht sie auf das DOM handeln wie es ist, wenn man die manipulieren DOM außerhalb dieser Aktion (was Sie wahrscheinlich tun), dann wird das Framework nicht von Ihren Änderungen wissen. –

+0

In der Tat, aber ich suche nach einem Weg, um die Zusammenstellung meiner Ansicht zu erzwingen. –

Antwort

1

Es tut mir leid, dass ich nicht vollständig antworten kann, aber ich glaube, dass Sie den Aurelia ViewCompiler verwenden müssen, um die generierten Fragmente von HTML zu kompilieren, damit sie von Aurelia analysiert werden.

Versuchen Sie unter dem folgenden Link, um weitere Informationen zu suchen: How do you use ViewCompiler to manually compile part of the DOM?

+0

Dies scheint veraltet zu sein und Sie sollten jetzt die 'TemplatingEngine' verwenden. –

+0

Vielen Dank für Ihren Kommentar, ich werde in die TemplatingEngine schauen :) – qwerty2k

Verwandte Themen