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

我在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项目中没有看到类似的任何内容。

Answer 1

将通话移至附加（）。

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

import {Toastr} from './toastr';

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

使用Aurelia动态添加到Dom

1 个答案: