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