Aurelia 模板引擎组成答案

【问题标题】：Aurelia Templating Engine composeAurelia 模板引擎组成
【发布时间】：2017-03-17 01:15:57
【问题描述】：

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

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

我找不到合适的文档或小样本来说明如何准确使用它。

这是我目前所拥有的

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，但是，该组件似乎没有呈现。任何帮助，将不胜感激！

【问题讨论】：

viewModel 应该是字符串路径或实例。例如viewModel: new SnackbarHostElement()
谢谢！而不是通过container.get(SnackbarHostElement)使用DI使用new

标签： javascript aurelia templating

【解决方案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;
}

【讨论】：

【解决方案2】：

我就是用这样的方法，希望能帮到你！

const View = await this.templatingEngine.compose({
    host: this.element,
    container: this.container,
    bindingContext: this.bindingContext,
    overrideContext: this.overrideContext,
    viewModel: this.container.get(CustomComponent),
    viewResources: this.viewResources,
    viewSlot: new ViewSlot(this.element, true),
});

【讨论】：