Aureliaでは、一時的な要素と動的な要素を追加する正しい方法は何ですか

Question

DOMに1つ以上の一時要素を作成するビューモデルトリガーを持つことができます。これらの要素は、一定期間後に削除されます。

これは、後の効果の簡単な例については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!' }); 
    } 
    }