Как правильно перерисовывать данные?
Всем привет. Подскажите, пожалуйста, как решить следующую задачу:
Происходит запрос к серверу, в ответе приходят данные: 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 некий контейнер } } Подскажите, пожалуйста, в данном случае я сначала затираю контейнер, а затем перерисовываю. Как мне сделать, чтобы я изменял только тот элемент, на который я повлиял? |
darktowerk56c,
может в функции удаления и удалять строку таблицы, без общего render |
Часовой пояс GMT +3, время: 23:47. |