Урок 6. Full-Stack практика. Создание JavaScript блога. Удаление постов

Автор Denis Lisitsin
Урок 6. Full-Stack практика. Создание JavaScript блога. Удаление постов

Приветствую вас в заключительном уроки курсы по созданию своего блога с использованием Full Stack Technology на джаваскрипте и по сути нам осталось стерилизовать кнопочку удаление определенного паста поэтому давайте займемся данной задачи для начала.

Давайте перейдём в текстовый редактор и нас интересует уже клиентские скрипты то есть File index.js и здесь есть функция которая вызывается когда она загрузится полностью контент дом-дерево здесь внизу у нас уже есть новая простушка событие до. На кнопочки добавить пост и давайте мы создадим ещё одну картошку событие которое позволит нам удалять определённые пасты, но сделаем необычно мы будем делегировать события и соответственно. Мы повесим прослушку события на вот этот список в котором хранятся уже все посты потому, что мы не можем только на кнопочку удаление.

Да потому, что они постоянно динамическим раз меняются в этом малыше делегировать события значит здесь мы пишем document queryselector.

У нас есть этот пост. Давайте Мы повесим обработчик события Click и допустим будем вызывать метод например Delete Post также не вызываем данную функцию. Да потому, что мы всегда должны передавать просто reference на. Давайте напишем лучше он Delete чтобы похоже теперь создаем данную функцию и сюда мы принимаем некоторые ивент и теперь давайте проверять. Как нам нужно определить, что сейчас мы должны что-то удалить да. Потому, что если мы сейчас выйдем в консоль события ивент. Дай одну страницу он там и больших любые местам и мы в любом случае будем получать — это событие, но нам нужно каким-то образом определить, что вы кликнули именно по кнопочки удаления для этого мы можем в функция которая генерирует HTML карточки добавить специальный класс например JS Remove кнопочка который удаляет всё и определять в функция есть ли у данного элемента по которому кликнули класс PS3 Move делается достаточно просто мы просто в конструкции If пишем, что если у Event Target Data есть у того элемента по которому кликнули объекте classlist есть оклад который называется Just Remove то в таком случае мы действительно клипа нужны нам кнопки дальше. Давайте допустим спросим у пользователя через функцию confirm. Действительно ли он желает удалить пост поэтому не сдавайте занесен всё в переменную например десижн глобальную функцию confirm и здесь просим. Вы уверены, что хотите пост и далее мы будем проверять есть ли у нас. Одессе он стоит. Значение True то есть пользователь нажал на кнопочку. О'кей, тогда мы должны удалять пост значит далее нам нужно понять какой именно пост удалить то есть по сути. Мы хотим получить его. Иди иди у нас хранится в объекте пост и нижнее подчёркивание. Это я обычно мы можем просто мы мы будем отвлекать именно по данному элементу поэтому сюда мы можем. Добавить новый атрибут Data ID со значением post-it избирать именно вот этот атрибут на. Где хранятся — это нашего паста мы создаем переменную один и мы его заберём из поля и. Таргет с помощью функции getattribute и атрибуты называется data-id adalya по сути зная — это мы можем. Отправить этот. Зайди на сервер для этого по сути нам нужно просто реализовать функцию удаления до в классе Post API создадим новую функцию Static например римов мы будем получать в ремонт некоторые — это есть, а что мы будем делать мы будем возвращать функцию fitch по байесу. Элеон только к нему нужно добавить ещё и. Да поэтому давайте мы сегодня днём в фигурной скобочки есть напишем был и сюда мы укажем — это надо для того чтобы у нас получился нужны и также как параметры. Давайте укажем Method Delete. Да потому, что мы будем слушать именно данный метод. И после этого мы как обычно значением какой-то результат то есть нет получился довольно-таки просто. Теперь мы можем обратиться к классу по стопе вызвать метод Remove сюда передать нужны — это и как только у нас сервер ответит успехом во. Франции Zen можем удалить уже визуально теперь из списка постов нужен нам пост для этого мы можем воспользоваться. Давай сначала найдем. А нужный пост его индекс. Пустим Post Index все посты у нас хранятся в массиве поз и далее с помощью методов find Index мы можем на каждой итерации по некоторым пост и сравнивать если post-it нижнее подчеркивание равняется ID на вот этому который мы нашли так — это и есть тот самый. Вкус который нам нужно удалить и далее по сути мы можем просто изменить массив Post. Спайс указать, что мы хотим удалить один элемент начиная с индекса текущего поста и количество один элемент. И после этого он просто выезжаем метод render passes куда мы передадим. Новый объект новый массив постов сохраним и. Давайте проверим как — это работает сейчас сейчас если мы кликаем по разным местам ничего не происходит если мы хотим удалить например второй пост то у нас появляется confirm нажимаю например OK icatvision моментально на списка при этом если посмотреть в Network то у нас есть запрос да то есть вот у нас идёт на формирование запроса Post и дальше идёт какой-то. Иване и вечер расписан Method Delete If превью мы получаем сообщение удалено. Но мы его не просто удаляем пост из песка в принципе кстати. Мы закончили и как я говорил нам нужно внести еще два маленьких изменения для того чтобы корректно отображать пасты. Давайте вернемся в функцию генерации паста карт во-первых нам нужно указать здесь. Центральный написано указывать дату и также показывать мультики строчный текст. Давайте начнём с мультик срочного текста допустим параграфу пэна просто можно задать онлайн стиль. Как называется white-space и значение мне будет при line если мы зададим такой стиль и посмотрим. Вам теперь приложение — это мы видим, что мы получаем же текст многострочном так как мы его создавали то есть этот.

0 комментариев
0

Читайте также