Question

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

请参阅此fiddle，了解我所效果的简单示例。

这是一个简单的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(); });
}

Answer 1

您可以将一组通知发布到 -

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>

并在您的视图模型中

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

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

1 个答案: