В предыдущем уроке мы сделали так, что можно просматривать уже созданные записи. Давайте теперь сделаем так, чтобы просматриваемую запись можно было поредактировать.
Конечно, и сейчас можно поредактировать нашу запись в текстареа - только вот в объекте записей эти изменения не сохранятся. То есть при следующем просмотре записи в ней по-прежнему будет старый текст.
Что же у нас сейчас будет, если при просмотре записи нажать на кнопку сохранения? Просто создастся новая запись с этим текстом.
Итак, давайте поправим ситуацию так, чтобы можно было как сохранять новые записи, так и редактировать уже созданные.
Алгоритм решения
Сделаем так, чтобы нажатие на кнопку в режиме просмотра записи редактировало эту запись, а нажатие на кнопку в режиме создания - создавало новую запись.
Пусть режим задается атрибутом data-mode
для нашей кнопки. Пусть, если этот атрибут
имеет значение 'create' - кнопка сохраняет
новую запись:
<div id="text">
<textarea></textarea>
<button data-mode="create">сохранить</button>
</div>
А если этот атрибут имеет значение 'update'
- пусть кнопка редактирует открытую запись.
При этом номер открытой записи будем хранить
в атрибуте data-key:
<div id="text">
<textarea></textarea>
<button data-mode="update" data-key="3">сохранить</button>
</div>
Проиллюстрирую ваш JavaScript код для обработчика клика по кнопке:
button.addEventListener('click', function() {
let mode = this.dataset.mode;
if (mode == 'create') {
// ваш код для создания новой записи
}
if (mode == 'update') {
let key = this.dataset.key;
// ваш код для редактирования записи с номером key
}
});
Смена режимов
Очевидно, что по заходу на страницу сохраненных
записей не будет. Это значит, что изначально
кнопка должна быть в режиме create.
Затем при нажатии на просмотр любой записи
режим кнопки должен меняться на update
и в data-key должен записываться номер
открытой записи.
Как же режим будет меняться с редактирования обратно на создание? Я бы предложил, что нажатие на кнопку в режиме редактирования должно обновлять запись и менять режим на создание.
Этого, однако, не достаточно. Ведь мы можем просто просматривать запись, не желая ее редактировать. А потом можем захотеть вернутся в созданию. В этом случае нам нужна еще одна кнопка, которая будет возвращать нас в режим создания.
Вставим эту кнопку в нашу верстку:
<div id="wrapper">
<div id="menu">
<div id="notes">
<ul id="notes">
<li data-key="1">запись 1</li>
<li data-key="2">запись 2</li>
<li data-key="3">запись 3</li>
</ul>
</div>
<div id="create">
<button>новая запись</button>
</div>
</div>
<div id="text">
<textarea></textarea>
<button>сохранить</button>
</div>
</div>
Реализация
Реализуйте описанное редактирование записей.
Сделайте так, чтобы на экране отображался режим, в котором мы сейчас находимся.