2017-03-17 1 views
1

코드 (<compose> 아님)를 통해 구성 요소를 동적으로 구성하고 서비스 (팝업과 비슷한)에서 DOM에 추가하려고합니다.Aurelia 템플릿 엔진 구성

제 생각에 가장 좋은 방법은 을 .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

대단히 감사합니다! DI를 사용하여'container.get (SnackbarHostElement)'를 통해'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; 
}