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を追加しました。この内容は、このされています：

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); 
     } 
    } 
} 

コードが正常に動作し、私はshowToastメソッド内でそれを配置する場合、ブレークポイントにヒットするが、私は、ブラウザでのDOMを検査するとき、div要素を追加していないようですhtmlで

私は間違っていますか？この要素を実際にDOMに挿入するにはどうすればよいですか？ htmlを再描画するために呼び出す必要がある別のメソッドがありますか？私はaurelia-dialogプロジェクトでそれ以外の何かを見たことがありませんでした。

Answer 1

添付ファイルを呼び出します（）。

私はAureliaも新しく、aurelia-pal DOMは初期レンダリングの前に動作しないようです。

import {Toastr} from './toastr'; 

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