Question

我正在使用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，来自纱线的聚合物cli，最后版本的chrome）

从未启用firestore脱机持久性

这可能会成为一个相当昂贵的问题......任何人都可以帮忙吗？

Answer 1

根据我的测试，您需要跟踪初始查询，然后再调用取消订阅。当你介绍

 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>

我不能使用聚合物

1 个答案: