Я не могу отсоединить слушателя в пожарной части, используя полимер

Question

Я не могу отсоединить слушателя в пожарной части, используя полимер

1

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

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<dom-module id="test-app">
<template>
    <style>
         :host {
            display: block;
        }
    </style>

    <h2>connect</h2>
    <paper-fab on-tap="connect"></paper-fab>

    <h2>change something</h2>
    <paper-fab on-tap="changeSomething"></paper-fab>

    <h2>disconnect</h2>
    <paper-fab on-tap="disconnect"></paper-fab>

</template>

<script>
    class TestApp extends Polymer.Element {
        static get is() {
            return 'test-app';
        }
        static get properties() {
            return {
                text: {
                    type: String
                }
            };
        }
        getRef() {
            return db.collection('utenti').doc('ZLpc0IDlkEVeb9DEKR2f')
        }
        connect() {
            console.log('connect');
            this.getRef().onSnapshot((doc) => {
                console.log('text Changed');
                console.log(doc.data());
                this.text = doc.data().titolo
            });
        }

        changeSomething() {
            let newText = this.text + ' randomtext'
            this.getRef().update({
                titolo: newText
            })
        }

        disconnect() {
            console.log('disconnect');
            var unsubscribe = this.getRef().onSnapshot(function () {});
            unsubscribe();
        }


    }

    window.customElements.define(TestApp.is, TestApp);
</script>

в приведенном выше примере у меня есть 3 кнопки, нажатие первой будет правильно подключаться к документу

log 
1 connect
2 text Changed
3 [object]

чем я нажимаю второй, чтобы сделать то же самое изменение

log 
4 text Changed
5 [object]

чем я нажимаю третий, чтобы отключить

log
6 disconnect

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

log
7 text Changed
8 [object]

на данный момент ясно, что разъединение никогда не происходило. код разъединения находится прямо из документации firestore, так что это не может быть проблемой.

версия программного обеспечения должна быть обновлена (firebase from bower, полимер cli из пряжи, последняя версия хрома)

firestore offline persistence никогда не включалась

это может стать довольно дорогостоящей проблемой... может ли кто-нибудь помочь?

Stefano Marchesi 01 дек. 2017, в 16:09

Источник

Теги:

javascript

firebase

google-cloud-firestore

polymer-2.x

1 ответ

Ещё вопросы

TheeBen · Answer 1 · 2018-01-30T15-45-00.000Z

Основываясь на моих тестах, вам нужно отслеживать свой первоначальный запрос и позже отказаться от подписки на него. Когда вы вводите

 var unsubscribe = this.getRef().onSnapshot(function () {});

unsubscribe() действует на этом как новый запрос, чтобы отключить прослушиватель и не удалит тот, который вы хотели отделить. Поэтому сохраните свой запрос в переменной и позже отсоедините либо вручную, либо через наблюдателя, как показано ниже. Имейте в виду, если ваш запрос изменяется, предыдущий слушатель все еще прослушивается и должен быть отсоединен (например, в наблюдателе от _handler).

...
<script>
    class TestApp extends Polymer.Element {
        static get is() {
            return 'test-app';
        }
        static get properties() {
            return {
                text: {
                    type: String
                }, 
                //handler to save query for later removal
                _handler: {
                    type: Object,
                    observer: '_onHandlerChange',
                    value: function(){
                       return {}
                    },
                },
            };
        }

         //save query into _handler
        connect() {
            this._handler = this.getRef().onSnapshot((doc) => {
                console.log('text Changed');
                console.log(doc.data());
                this.text = doc.data().titolo
            });
        }

        //detach by accessing your initial query here
        disconnect() {
            var unsubscribe = this._handler;
            unsubscribe();
        }

        //or you could keep removing old query if your query changes like this
        _handlerChanged: function(newH,oldH) {
            console.log('_handlerChanged' , newH , oldH);
            if (!oldH) return ; 
            const unsubscribe = oldH;
            unsubscribe();
        },

    window.customElements.define(TestApp.is, TestApp);
</script>