将 firestore 变量放入聚合物模板中

Question

也许是我想多了，但我想不出将 Firestore 查询结果放入 Polymer 3 模板的方法。例如：

class MyPage extends PolymerElement {

    constructor() {
        super();

        /* somehow set this.users to the firestore users query results */

    }

    static get properties() {

        return {
            users: {
                type: String
            }
        }

    }

    static get template() {
        return html`<div>[[users]]</div>`;
    }
}

使用以下代码，它可以正常工作并打印到控制台：

var all_users;

const setsRef = firestore.collection("users");

setsRef.get().then(function(querySnapshot) {

    var users = [];

    querySnapshot.forEach(function(doc) {
        users.push(doc.data().verb);
    });

    all_users = users.join(", ");

    console.log("All users: ", all_users);

    /* run a function here that sets this.users = all_users */

})
.catch(function(error) {
    console.log("Error getting documents: ", error);
});

问题是，我必须运行一个函数来自Firestore的结果，而另一个是一个对象的构造函数。我更希望将所有 Firebase 查询都放在一个外部 js 文件中，但这种异步思维过程让我感到困惑。

Answer 1

使用生命周期方法之一加载用户：

https://www.polymer-project.org/3.0/docs/devguide/custom-elements#element-lifecycle

class MyPage extends PolymerElement {
    constructor() {
        super();
        this.users = []
    }

    static get properties() {
        return {
            users: {
                type: String
            }
        }

    }

    static get template() {
        return html`<div>[[users]]</div>`;
    }

    async ready() {
      super.ready()
      try {
        const querySnapshot = await firestore.collection("users").get()
        this.users = querySnapshot.map(doc => doc.data().verb).join(", "); 
      } catch (error) {
        console.log(error)
      }
    }
}

如果您不想使用其中一种生命周期方法，那么您可以触发您自己的 MyPage 元素可以侦听的自定义事件：https://www.polymer-project.org/3.0/docs/devguide/events#custom-events

我不熟悉 Polymer，所以以上内容未经测试，是我阅读文档得出的结论。

将 firestore 变量放入聚合物模板中

put a firestore variable in a polymer template

firebase

polymer

google-cloud-firestore