Aurelia로 Dom에 동적으로 추가하십시오.

Question

비슷한 것을하기를 희망하면서 aurelia-dialog 프로젝트 (주로 renderer에 집중)를 보았습니다. 나는 toastr project을 좋아하지만, Aurelia CLI (비록 내가 Typescript 해골 프로젝트와 함께 작동시킬 수는 있지만)과 함께 작동하지 않는 것처럼 보입니다. 독립적 인 솔루션으로 작업하기 시작했습니다. jQuery에서 독립적으로 작동하고 싶습니다. 그러나 이것이 작동하지 않는 이유를 이해하지 못하는 것 같습니다.

au new 명령을 사용하여 새 프로젝트를 만들었습니다. 내가 이것을 포함하도록 app.ts 파일을 업데이트 :

import {Toastr} from './toastr'; 

export class App { 
    constructor() { 
    new Toastr().showToast(); 
    } 
} 

와 나는 app.ts 파일과 동일한 수준에서 다른 하나 개의 파일 toastr.ts을 추가했다. 코드는 잘 실행하고 나는 showToast 방법 내부에 배치하는 경우 중단 점을 명중,하지만 브라우저에서 DOM을 검사 할 때, 그것은하지 않는 것

import {DOM} from 'aurelia-pal'; 

export class Toastr { 
    showToast() { 
     let body = DOM.querySelectorAll('body')[0]; 
     let toastrContainer = DOM.getElementById('toastr-container'); 

     if(!toastrContainer) { 
      toastrContainer = DOM.createElement('div'); 
      toastrContainer.id = 'toastr-container'; 
      toastrContainer.textContent = 'boo'; 
      body.insertBefore(toastrContainer, body.firstChild); 
     } 
    } 
} 

가에 사업부를 추가하려면 : 그것은 내용이 있습니다입니다 HTML은 전혀.

내가 뭘 잘못하고 있니? 이 요소를 DOM에 실제로 삽입하려면 어떻게해야합니까? html이 다시 그려지기 위해 호출해야하는 또 다른 메소드가 있습니까? 나는 aurelia-dialog 프로젝트에서 그와 같은 것을 보지 못했습니다.

Answer 1

전화를 attached()로 이동하십시오.

나는 Aurelia에 너무 익숙하다. aurelia-pal DOM은 초기 렌더링 전에는 작동하지 않는다.

import {Toastr} from './toastr'; 

export class App { 
    attached() { 
    new Toastr().showToast(); 
    } 
}