Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2019, 08:09
Интересующийся
Отправить личное сообщение для darktowerk56c Посмотреть профиль Найти все сообщения от darktowerk56c
 
Регистрация: 08.03.2019
Сообщений: 22

Как правильно перерисовывать данные?
Всем привет. Подскажите, пожалуйста, как решить следующую задачу:
Происходит запрос к серверу, в ответе приходят данные:
const users = [
    {
      id: 73334,
      firstName: "Дмитрий",
      type: 1,
      userNumber: "1122334455667"
    },
    {
      id: 83334,
      firstName: "Михаил",
      type: 2,
      userNumber: "1122334455667"
    },
    {
      id: 93334,
      firstName: "Илья",
      type: 1,
      userNumber: "1122334455667"
    },
    {
      id: 53334,
      firstName: "Николай",
      type: 2,
      userNumber: "1122334455667"
    }
]


Следующим образом я эти данные вывел на страницу:
export const getUserTemplate = (user) => {
  return `
      <tr class="users__row">
        <td class="users__cell">
            ${user.firstName}
        </td>
        <td class="users__cell}">
            ${user.type}
        </td>
        <td class="users__cell">
            ${user.userNumber}
        </td>
        <td class="users__cell">
            <button
                class="users__button-edit"
                type="button"
                data-users-ref="edit"
                data-users-options=${user.id}
            />
                Редактировать
            </button>
        </td>
        <td class="users__cell">
            <button
                class="users__button-delete"
                type="button"
                data-users-ref="delete"
                data-users-options=${user.id}
            >
                Удалить
            </button>
        </td>
      </tr>
  `;
};

export default class Users {
  constructor(el) {
    this.el = el;

    this.usersTbody = this.el.querySelector('[data-users-ref="users-tbody"]');

    this.init();
  }

  render = (users) => {
    this.usersTbody.innerHTML = '';

    for (let i = 0; i < users.length; i++) {
      this.usersTbody.innerHTML += getUserTemplate(users[i]); // в this.usersTbody некий контейнер
    }
  }

}

Затем при, например, удалении (фактически любом действии) пользователя, я получаю вот такую структуру:
const users = [
    {
      id: 73334,
      firstName: "Дмитрий",
      type: 1,
      userNumber: "1122334455667"
    },
    {
      id: 83334,
      firstName: "Михаил",
      type: 2,
      userNumber: "1122334455667"
    },
    {
      id: 93334,
      firstName: "Илья",
      type: 1,
      userNumber: "1122334455667"
    }
]

И вызываю снова метод render
render = (users) => {
  this.usersTbody.innerHTML = '';

  for (let i = 0; i < users.length; i++) {
    this.usersTbody.innerHTML += getUserTemplate(users[i]); // в this.usersTbody некий контейнер
  }
}

Подскажите, пожалуйста, в данном случае я сначала затираю контейнер, а затем перерисовываю.
Как мне сделать, чтобы я изменял только тот элемент, на который я повлиял?
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2019, 08:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

darktowerk56c,
может в функции удаления и удалять строку таблицы, без общего render
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сравнивать временные метки? gsdev99 Элементы интерфейса 3 10.02.2019 12:20
Как правильно отрендерить данные на react с разрывом? s24344 Элементы интерфейса 0 28.01.2019 19:35
Как передать данные из одинаковых форм php скрипту через AJAX? griga999 AJAX и COMET 28 10.10.2016 06:09
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19