2017-02-06 16 views
1

Я хочу добиться эффекта, который может привести к созданию модели представления одного или нескольких временных элементов в DOM. Эти элементы будут удалены через некоторый период времени.В Aurelia, какой правильный способ добавить временные и динамические элементы

См. Это 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(); }); 
} 
+0

Я скажу, что я лично просто использую toastr для обработки этой ситуации. Он «просто работает», даже если он не является компонентом Aurelia. –

ответ

2

Вы можете просто массив уведомлений, опубликованных уведомлений -

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!' }); 
    } 
    } 
+0

Когда массив изменится, все уведомления будут удалены и прочитаны? Если да, это повлияет на текущую анимацию? – efunneko

+0

Если вы назначили новый массив, это может произойти, но если вы просто используете такие операции, как 'push',' pop' и 'splice', которые работают с массивом на месте, то нет, они не будут удалены и readded. –

+0

После нескольких экспериментов я обнаружил, что он работает так, как описано, если вы используете анимацию Aurelia 'enter'. Кажется, что если я анимация «оставить», шаблон не добавляет новый элемент уведомления во время работы анимации. Возможно, ошибка? – efunneko

 Смежные вопросы

  • Нет связанных вопросов^_^