我正在嘗試在另一個元素中創建Aurelia元素。我使用phosphor的停靠框架,當我動態創建面板時,我想添加一個使用Aurelia構建的組件。在Aurelia中創建元素
例如:我有一個非常簡單的記錄組件:
Logging.html
<template>
<h1>Logging....</h1>
</template>
Logging.ts:
export class Logging {
constructor() {
console.log('Logging constructor')
}
}
組件作品,當我「只是把預期它在頁面上「。
現在一些它創建熒光粉的Widget方法裏面我有這樣的事情:
var widget = new Widget();
widget.title = "Got Logs?";
var contentElement = document.createElement('logging');
widget.node.appendChild(contentElement);
panel.insertBottom(widget);
此代碼,給定一個熒光粉面板,創建一個Widget,創建它看起來像一個元素:<logging></logging>
並添加到到小部件的內部節點。由此產生的「DOM」是正確的,但aurelia不呈現元素。
我也曾嘗試使用TemplatingEngine像這樣:
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: {}});
}
}
但這似乎並不工作,但我懷疑我使用它的權利,我想我可能需要使用compile
,真的不確定。
任何見解,將不勝感激。
這取決於在這創造了什麼問題,因爲據我的SPA架構的知識去,他們將在DOM的作爲,如果你操縱此操作之外的DOM(您最有可能做的),那麼框架將不知道您的更改。 –
確實,但我正在尋找一種方法來「強制彙編」我的觀點。 –