javascript - Aurelia 模板引擎组成

Question

我正在尝试通过代码动态组合组件(而不是使用 <compose> )并将其从服务添加到 DOM(类似于弹出窗口)。

根据我的理解，最好的方法是使用 TemplatingEngine通过.compose方法。

我找不到关于如何准确使用它的像样的文档或小样本。

这就是我目前所拥有的

constructor(
    loggerFactory: LoggerFactory,
    private bindingEngine: BindingEngine,
    private templatingEngine: TemplatingEngine,
    private container: Container,
    private viewResources: ViewResources
) {

    const hostee = this.templatingEngine.compose({
        host: document.body,
        container: this.container,
        bindingContext: {

        },
        viewModel: SnackbarHostElement,
        viewResources: this.viewResources,
        viewSlot: new ViewSlot(document.body, true)
    });

    hostee.then(x => {
        x.attached();
    });

我没有收到任何错误，并且 .then正在被触发，但是该组件似乎没有渲染。任何帮助，将不胜感激!

Answer 1

这是最终的代码(感谢@Fabio)

async init(): Promise<View | Controller> {
    const viewController = await this.templatingEngine.compose({
        host: document.body,
        container: this.container,
        bindingContext: {

        },
        viewModel: this.container.get(SnackbarHostElement),
        viewResources: this.viewResources,
        viewSlot: new ViewSlot(document.body, true)
    });
    viewController.attached();
    return viewController;
}