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

Я пытаюсь разработать простую систему предупреждений / уведомлений в LitElement точно так же, как http://bootstrap-notify.remabledesigns.com/, где, где бы вы ни находились, вы можете позвонить $.notify() и показать уведомление. Проблема выглядит простой, но довольно сложной: вы должны предоставить общий доступ к списку сообщений всем веб-компонентам в приложении. В каждой части приложения внутри LitElement WC пользователь должен иметь возможность делать что-то простое, например 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


person alfredopacino    schedule 09.03.2020    source источник
comment
Думаю, вам стоит взглянуть на подход connect-mixin from pwa-helpers принимает, это зависит от redux, но вы можете легко добиться чего-то подобного без зависимости redux   -  person Alan Dávalos    schedule 10.03.2020
comment
Я не уверен, как это должно помочь в данном контексте, вы предлагаете мне реализовать для этого шаблон наблюдателя? В любом случае я отредактировал свой вопрос с помощью исправного решения, мне не очень нравится this.context.requestUpdate();, в котором я принудительно обновляю все приложение ..   -  person alfredopacino    schedule 10.03.2020


Ответы (1)


я рекомендую миксины

Я придумал шаблон, в котором во время инициализации: я готовлю свою модель состояния с единственным источником истины, а затем беру свои компоненты, но прямо перед тем, как зарегистрировать эти компоненты в dom, я делю состояние на соответствующие доли и распространить эти с помощью миксина

и поэтому мои компоненты имеют доступ к предоставленному им share, и, возможно, им повезет найти notificationsQueue или что-то в этом роде, и, возможно, с методами для чтения или записи уведомлений на уровне страницы

миксины - отличный способ манипулировать компонентами, конечно, статически с помощью декораторов, но давайте не будем забывать, что мы также можем использовать миксины для применения чего-то более динамичного, например некоторого состояния во время инициализации, до того, как компоненты будут зарегистрированы.

миксины также являются отличным способом для компонентов темы, например с _ 3_ В последнее время я много использую для светового элемента

person ChaseMoskal    schedule 17.05.2020