javascript - 从 Firebase 刷新 Web 组件中的数据

Question

更新：我发现我正在寻找的是 Firebase 的 .onSnapshot 函数，如：

db.collection("prjects")
    .onSnapshot(function(data) {}

我目前的问题是我无法将引用传递给 .onSnapshot()。这就是我的意思：

import Template from "./template.js";
import { db } from "../../util/firebase.js";

export default class Dashboard extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: "open" });

        this.shadowRoot.innerHTML = Template.render();
        this.dom = Template.mapDOM(this.shadowRoot);

        if (this.dom.projectList) {
            console.log("this.dom.projectList is defined")
        } // checking if this.dom.projectList is defined: it is!

        db.collection("projects")
            .onSnapshot(function (data) {
                var html = "";
                data.forEach(function (doc) {
                    const project = doc.data();
                    const li = `
                        <li>
                            <h5>${project.title}</h5>
                            <p>${project.description}</p>
                        </li>
                    `;
                    html += li;
                    console.log("test", html);
                });

                this.dom.projectList.innerHTML = html;  // not defined!!

            }, error => { console.log("Oops! ", error) });
    }

我仍然无法刷新页面内容...如何访问 .onSnpashot() 中的“this.dom.projectList”？

==================================================== ======================

我正在开发一个列出存储在 Firebase Firestore 数据库中的项目的 web 组件，我希望它在有人在 Firestore 中添加另一个项目时自动刷新。

我的问题是第二部分（刷新）。我对 webcomponents 生命周期的理解是，潜在有用的状态是：constructor（组件加载到内存中，发生一次），connectedCallback（组件显示），attributeChangedCallback（属性改变，状态改变）。最后一个可能很有趣，但是在一个元素中传递数十个属性，对我来说听起来很奇怪：firebase 的“snapshot.docs”可以包含大量要反序列化的数据。

我试图在不重新加载整个页面的情况下查看新内容。

你怎么解决这个问题？

这是我当前的网络组件代码：

import Template from "./template.js";
import {db} from "../../util/firebase.js";

export default class Dashboard extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({mode:"open"});

        db.collection("projects").get().then(snapshot => {
            this.setupProjects(snapshot.docs);
            const data = snapshot.docs;
            data.forEach(doc => {
                console.log(doc.data().title)
            })
        }); 
    
    


        this.shadowRoot.innerHTML = Template.render();
        this.dom = Template.mapDOM(this.shadowRoot);
    }

    setupProjects(data) {
        let html = "";
        data.forEach(doc => {
            const project = doc.data();
            const li = `
                <li>
                    <h5>${project.title}</h5>
                    <p>${project.description}</p>
                </li>
            `;
            html += li;
        })

        this.dom.projectList.innerHTML = html;
    }
};

if (!customElements.get("dashboard-page")){
    customElements.define("dashboard-page", Dashboard);
}

这就是我的模板的构建方式：

export default {
    render() {
        return `
        ${this.html()}
        ${this.css()}`
    },
    mapDOM(scope){
        return {
            projectList: scope.querySelector("#projectList")
        }
    },
    html() {
        return `
            Welcome Home, logged in.
            <ul id="projectList"></ul>
            `
    },
    css(){
        return`
        <style>
        </style>`
    }
}

```

Any idea will be welcome because I have none...

Thank you!

标签： javascriptfirebasegoogle-cloud-firestoreweb-component

Answer 1

• 让你的组件监听一个事件

    document.addEventListener("NewData",(evt=>{
      let newdata = evt.detail;
    })
  
  

• 数据更改时调度自定义事件

  document.dispatchEvent(new CustomEvent('NewData', {
     detail: YOUR DATA HERE,
  }));
  
  
  

• https://open-wc.org/faq/events.html

• https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events