Делитесь данными глобально и отображайте их в LitElement - PullRequest
Новая
       26

Делитесь данными глобально и отображайте их в LitElement

0 голосов
/ 09 марта 2020

Я пытаюсь спроектировать простую систему оповещений / уведомлений в LitElement точно так же, как http://bootstrap-notify.remabledesigns.com/, в которой, где бы вы ни находились в приложении, вы можете позвонить $.notify() и показать уведомление. Проблема выглядит простой, но она довольно сложная: вы должны поделиться списком сообщений по всем веб-компонентам в приложении. В каждой части приложения, внутри LitElement W C, пользователь должен иметь возможность сделать что-то простое, например NotificationInstance.push("my new message"). Я придумал это решение: 

// singleton class which is supposed to be shared in all the WCs that need to use the notification system
export class NotificationQueue {
    constructor() {
        if (!NotificationQueue.instance) {
            NotificationQueue.instance = this;
        }
        this.queue = [];
        return NotificationQueue.instance;
    }

    setContext(context) {
        this.context = context;
    }

    push(message) {
        this.queue = [...this.queue, message];
        this.context.requestUpdate();
    }

    remove(title) {
        this.queue = this.queue.filter( item => item.title !== title);
        this.context.requestUpdate();
    }
    get() {
        return this.queue;
    }

}

export class NotificationElement extends LitElement {
    static get properties() {
        return {
            queue: {
                type: Object
            }
        };
    }
    render(){
        return html`LIST: ${JSON.stringify(this.queue)}` //Stringify is just an example, this component will render the notifications properly
    }
}

В основном компоненте моего приложения 

class MyApp extends LitElement {
    connectedCallback() {
        super.connectedCallback();
        new NotificationQueue().setContext(this);
    }
   render() {
      return html`
        -- content of the app --
        <notification-element .queue="${(new NotificationQueue()).get()}"></notification-element>`;
   }
}

Как этот подход звучит для вас? Проблема здесь заключается в том, как заставить refreshUpdate() NotificationElement без вызова refreshUpdate() всего приложения . setContext(this) действительно является контекстом основного класса LitElement

...