2017-03-17 38 views
1

我試圖通過代碼動態地編寫組件(不是<compose>),並將其從服務(類似於彈出窗口)添加到DOM。Aurelia模板引擎撰寫

從我的理解,最好的方法是使用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被觸發,然而,該組件似乎並沒有被渲染。任何幫助,將不勝感激!

+1

的'viewModel'應該是字符串路徑或實例。例如'viewModel:new SnackbarHostElement()' –

+0

非常感謝!而不是通過'container.get(SnackbarHostElement)'使用DI來使用'new' –

回答

0

這是最後的代碼(感謝@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; 
}