動態添加到Dom與Aurelia

我一直在尋找aurelia-dialog項目（主要集中在renderer片），因爲我希望做類似的事情。我喜歡toastr project，但似乎無法讓它與Aurelia CLI一起工作（儘管我可以讓它與Typescript框架項目一起工作）。我開始研究獨立的解決方案（我希望它獨立於jQuery），但似乎無法理解爲什麼這不起作用。動態添加到Dom與Aurelia

我使用au new命令創建了一個新項目。我更新了app.ts文件包含此：

import {Toastr} from './toastr'; 

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

，我增加了一個其他的文件toastr.ts在同一水平app.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項目中，我沒有看到其他任何內容。

來源

2016-08-23 peinearydevelopment

將呼叫轉移到附件（）。

我也是Aurelia的新手，它似乎像aurelia-pal DOM在初始渲染之前不起作用。

import {Toastr} from './toastr'; 

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

來源

2016-08-24 07:12:19 huocp

動態添加到Dom與Aurelia

回答

相關問題