Я пытаюсь разработать простую систему предупреждений / уведомлений в 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
connect-mixin
from pwa-helpers принимает, это зависит от redux, но вы можете легко добиться чего-то подобного без зависимости redux - person Alan Dávalos   schedule 10.03.2020this.context.requestUpdate();
, в котором я принудительно обновляю все приложение .. - person alfredopacino   schedule 10.03.2020