PWA no framework - показывать динамическое c содержимое страницы как детали из выбранного элемента - PullRequest
Новая
       8

PWA no framework - показывать динамическое c содержимое страницы как детали из выбранного элемента

0 голосов
/ 11 июля 2020

Я создаю приложение PWA без фреймворка, я получил данные из Firebase, и когда я нажимаю на один из элементов в списке, я хотел бы открыть новую страницу с подробной информацией об этом элементе.

Каким способом можно достичь этого?

Мои элементы загружаются в

<div class="items container"></div>

У меня есть эта функция для добавления элемента 

const renderItem = (data, id) => {

  const html = `
    <div class="card-panel item white row" data-id="${id}">
      <img src="${data.image_url}" alt="${data.name}">
      <div class="item-details">
        <div class="item-title">${data.name}</div>
        <div class="item-short-description">${data.short_description}</div>
        <div class="item-price">${data.price},</div>
      </div>
    </div>
  `;
  items.innerHTML += html;
};

Я использую эту функцию для загрузки элементов из Firebase 

db.collection('items').onSnapshot(snapshot => {
  snapshot.docChanges().forEach(change => {
    if(change.type === 'added'){
      renderItem(change.doc.data(), change.doc.id);
    }
  });
});
...