使用 Aurelia 动态添加到 Dom答案

【问题标题】：Dynamically add to Dom with Aurelia使用 Aurelia 动态添加到 Dom
【发布时间】：2016-08-23 16:32:49
【问题描述】：

我一直在关注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 项目中没有看到其他类似的东西。

【问题讨论】：

标签： aurelia

【解决方案1】：

将调用移至 attach()。

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

import {Toastr} from './toastr';

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

【讨论】：