javascript - 使用纯 JavaScript 从 Firestore 接收数据

Question

这个问题可能真的很简单，但我有点被 Firestore 困住了。这是我的第一个使用 firestore + js 的项目，我正在尝试从数据库接收和显示数据。我有一种感觉，我正在做一些非常愚蠢的事情，因为似乎我正在循环访问我的数据并覆盖它，这就是为什么我只能看到一个文章元素，即使应该从数据库中获取 2 个文章元素。

document.addEventListener('DOMContentLoaded', event => {
  const app = firebase.app();
  const db = firebase.firestore();
  const myProducts = db.collection('products');
  myProducts.onSnapshot(products => {
    const productsContainer = document.querySelector('#products__container');
    products.forEach(doc => {
      data = doc.data();
      console.log(data);
      let productMarkup = `<article id="${doc.id}">
        <h4>${data.name}</h4>
        <p>${data.price}</p>
      </article>`;
      productsContainer.innerHTML = productMarkup;
      console.log(productMarkup);
    });
  });
});

Answer 1

经过 Alex 的建议，我决定采用不同的方法来创建 DOM 元素

  const db = firebase.firestore();
  const myProducts = db.collection('products');
  const productsContainer = document.querySelector('#products__container');

  function renderProduct(doc) {
    const docFrag = document.createDocumentFragment();
    let article = document.createElement('article');
    let productName = document.createElement('h4');
    let productPrice = document.createElement('p');

    article.setAttribute('id', doc.id);
    productName.textContent = doc.data().name;
    productPrice.textContent = doc.data().price;

    docFrag.appendChild(productName);
    docFrag.appendChild(productPrice);

    article.appendChild(docFrag);
    productsContainer.appendChild(article);
  }

  myProducts.onSnapshot(products => {
    products.forEach(doc => {
      data = doc.data();
      console.log(data);
      renderProduct(doc);
    });
  });
});```