Контекст: У меня есть случай, когда в качестве используемых компонентов используется база данных реального времени firebase в Polymer 2.x.У меня есть функция, которая выполняет преобразования для определенной пользовательской активности с объектом реального времени firebase.Я использовал полимерный веб-компонент.
То, что я хочу: , когда пользователь закрывает вкладку или окно, сохраняет данные в базе данных реального времени firebase, а затем закрывает окно.
Результат: Я использовал при загрузке окна в скрипте полимерный элемент.Но не в состоянии запустить метод внутри полимерного элемента, который запускает хранение данных в режиме реального времени в БД.
Что я ищу: 1. Способ инициирования публичной функции элемента из скриптаэлемента.Или 2. лучший способ реализовать при закрытии окна / вкладки сохранение данных
Спасибо.
Код:
<!DOCTYPE html>
<dom-module id="t-page">
<template is="dom-bind">
....
</template>
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' :
'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, async function (e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Are you sure to leave the page?'; // a space
(e || window.event).returnValue = confirmationMessage;
setTimeout(async () => {
document.getElementById('trello-page').onCloseWindow();
}, 2500);
return confirmationMessage;
});
/**
* @polymer
* @extends HTMLElement
*/
class TPage extends Polymer.Element {
static get is() {
return 't-page';
}
... some properties ....{ colUpdateArr{...}}
async onCloseWindow() {
for (var i = 0; i < this.colUpdateArr.length; i += 2) {
var toCol = this.colUpdateArr[i];
var fromCol = this.colUpdateArr[i + 1];
await this.$.query.ref.child(toCol.$key).child('tasks').set(toCol.tasks);
await this.$.query.ref.child(fromCol.$key).child('tasks').set(fromCol.tasks);
}
}
} //end Polymer.Element
window.customElements.define(TPage.is, TPage);
</script>
</dom-module>