在Aurelia中，添加临时和动态元素的正确方法是什么

我希望实现这样一种效果，即可以让视图模型触发DOM中一个或多个临时元素的创建。这些要素将在一段时间后删除

看看这个简单的例子，我的效果后

下面是一种简单的jQuery方法：

var count = 1;
$("button").bind("click", function(e) {
    createNewNotifier(count++);
});

function createNewNotifier(text) {
    var div = $('<div></div>').appendTo(".notifications");
    div.text("Notification: " + text);
    div.hide(4000, function(){ $target.remove(); });
}

var计数=1；
$（“按钮”）.bind（“单击”），函数（e）{
createNewNotifier（count++）；
});
函数createNewNotifier（文本）{
var div=$（''）.appendTo（“.notifications”）；
div.text（“通知：+text”）；
div.hide（4000，函数（）{$target.remove（）；}）；
}

您只需将通知发布到一组通知即可-

export class Notifier {
  notifications = [];
  addNotification(notification) {
    this.notifications.push(notification);
    setTimeout(() => { 
      let index = this.notifications.indexOf(notification);
      notifications.splice(index, 1);
  }
}

从某种角度看-

<template>
  <ul>
    <li repeat.for="notification of notifier.notifications">${notification.value}</li>
  </ul>
</template>

---

阵列更改时，是否会删除并读取所有通知？如果是这样，这会影响正在进行的动画吗？如果您分配一个新阵列，这可能会发生，但如果您只是使用在阵列上操作的

推送

、

弹出

、和

拼接

，则不会删除和读取。经过一点实验，我发现，只要你使用Aurelia的“回车”动画，它就可以正常工作。如果我选择“离开”动画，则在动画运行时模板不会添加新的通知元素。也许是一个bug？我会说我个人只是用toastr来处理这种情况。即使它不是Aurelia组件，它也“正常工作”。

   import {Notifier} from './notifier';
   export class ViewModel {
     static inject = [Notifier];
     constructor(notifier) {
       this.notifier = notifier;
     }
     attached() {
       this.notifier.add({ value: 'Attached!' });
     }
   }