Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

IndexedDb i usuwanie elementów

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

IndexedDb i usuwanie elementów

Post 07.08.2018, 16:05:46

Witam, otóż robię aplikację z IndexedDB. Aktualnie usuwam elementy po prostu klikając przycisk, następnie usuwam z bazy, czyszczę DOM i wrzucam ponownie dane, które znajdują się w bazie. Wydaje się to mało optymalne, więć pomyślałem, aby po usunięciu elementu z bazy usuwać tylko dziecko kontenera o takim samym ID. Usuwanie działa, ale teraz niestety elementy nie są odświeżane w DOMie. Tzn. wyświętlając tylko 4 elementy, kiedy w bazie znajduje się ich np. 10, to po usunięciu jednego z nich zostaje ich 3 bo DOM nie ładuje tego jednego, kolejnego elemetu, który jest w bazie. Jak coś takiego dobrze zaimplementować? Wydaje się to łatwie, ale nie do końca. Elementy z bazy czytam za pomocą kursora.

METODA USUWANIA ELEMENTÓW:
Kod: Zaznacz cały
  deleteEvent: function(e) {
    let db = this.dbOpen.result,
        tx = db.transaction('EventsStore', 'readwrite');
        store = tx.objectStore('EventsStore'),
        eventID = Number(e.target.parentElement.parentElement.getAttribute('data-id')),
        articleToBeDeleted = e.target.parentNode.parentNode;

        let deleteItem = store.delete(eventID);
        deleteItem.onsuccess = e => {
          // this.clearDOM();
          // this.loadDataToDOM();
          //delete child from rencetly added container
          this.container.removeChild(articleToBeDeleted);
        }

        deleteItem.onerror = e => {
          throw new Error(e);
        }
  }


METODA ŁADOWANIA ELEMENTÓW DO DOM:
Kod: Zaznacz cały
  loadDataToDOM: function() {
    let db = this.dbOpen.result,
        tx = db.transaction('EventsStore', 'readwrite');
        store = tx.objectStore('EventsStore'),
        counter = 0,
        filters = this.setFilters();

        store.index(filters[0]).openCursor(null, filters[1]).onsuccess = e => {
          let cursor = e.target.result;
          if(cursor && counter++ < 4) {
            this.container.innerHTML += `<article class="popular__item" data-id='${cursor.primaryKey}'>
                          <figure class='article__image-wrapper'>
                            <img src="assets/images/ev1.jpg" alt="event name" class='article__image'>
                            <button class='button button--danger popular__delete'>⤫</button>
                          </figure>
                          <div class="article__wrapper article__info">
                            <div class="article__date">
                              <span class='article__day'>21</span>
                              <span class='article__month'>AUG</span>
                            </div>
                            <a href="#" class='article__link'>
                              <div class="article__content">
                                <header>
                                  <h4 class='article__title'>${cursor.value.title}</h4>
                                </header>
                                  <p class="article__summary">${cursor.value.location}</p>
                                  <p class='article__text'>${cursor.value.description}</p>
                              </div>
                            </a>
                          </div>
                      </article>`
               cursor.continue();
          } else {
            //if theres no events in container then display a message
            if(!this.container.innerHTML) return this.container.innerText = 'No events to display. You need to add one or restore data to initial values.';
            //bind all events inside container
            return this.bindEvents();
          }
      }
  }
XaooBBx
Posty: 57
Dołączył(a): 22.09.2016

Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 7 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51980 zarejestrowanych użytkowników.
Najnowszy użytkownik: Play


Nasi użytkownicy napisali:

  • 938331 wiadomości
  • w 247849 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)