Как сделать независимые todo списки?

Question

[Роман Валеев]

Всем привет.
Делаю todo-шку. Слева колонка, при нажатие на синюю кнопку, создаются списки задач, вот в таком виде -> инпут: кнопка открытия: кнопка удаления.
Вопрос:
Как сделать так, чтобы при нажатии на "кнопка открытия", справа отображалось содержимое данного списка и при нажатии на другой список, содержимое прошлого закрывается и отображается нынешнее? Куда копать, что почитать/посмотреть?


Спасибо

Comments

[Алексей Уколов]

Какой конкретно аспект вызывает у вас трудности? Хранение данных, рендеринг или что-то иное?

[Роман Валеев]

Рендеринг. С хранением позже буду разбираться.
По идее надо так: Открываем первый. Когда открываем второй, первый закрывается и наоборот.

Answer 1

[Егор П]

на кнопке открытия вешаешь еще и закрытие другого списка или проверку на то открыт ли список и закрытие его.
Решение в лоб -> у тебя где то должна быть переменная флаг которая отвечает за открытие и закрытие.
Клик на кнопке -> переменная становиться true и спискук добавляется класс на открытие.
как то так

Comments

[Алексей Уколов]

Имхо, проще сразу пытаться завязаться на History API и рендерить в соответствии с изменением URL. Примитивный роутер сделать не очень сложно, а пользы он принесёт намного больше, чем жонглирование глобалами.

[Егор П]

Алексей Уколов, ты прям хорошо ответил. А теперь можно так чтобы автор вопроса понял

[Алексей Уколов]

Если автору вопроса что-то непонятно, он вполне в состоянии, наверное, задать уточняющие вопросы или даже поискать информацию самостоятельно.

[Роман Валеев]

Алексей Уколов, ни че не понял))) пошел гуглить короче. Ну я вернусь, если что.

[Роман Валеев]

Алексей Уколов, я правильно понял, что вы предлагаете с помощью History api переходить по созданным спискам как по новым страницам, без перезагрузки, т.е. использовать историю текущей сессии (вкладки) браузера? Если так, то я не понимаю, чем должны быть в таком случае списки, которые создаются по кнопке?
Если к примеру брать какой нибудь SPA (в этом я тоже не силен, отталкиваюсь от того, что прочитал), то у него динамический контент подгружается с сервера, на котором уже есть этот самый контент, т.е. уже созданы html-файлы, которые подгружаются на сайт без перезагрузки страницы.
Но как быть в моем случае, если нет никаких других html-файлов, а списки создаются на ходу, по нажатию кнопки? Тогда как я смогу переходить по ним в соответствии изменения URL?

Поправьте если что не так понял.

[Алексей Уколов]

Роман Валеев, списки у вас всё равно где-то хранятся. Самое простое, с чего вы начнёте - это глобальная переменная в памяти. Вот оттуда берите их и рендерите, когда при помощи стандартных событий определяете, что URL страницы изменился.

[Егор П]

Алексей Уколов, и опять мы возвращаемся к глобальной переменной

[Алексей Уколов]

Егор П, когда в глобальной переменной хранятся данные - это нормально для начала. Когда в глобальной переменной хранится состояние роутинга - это не очень.

[Роман Валеев]

Алексей Уколов, а с чего url изменится то и что за события помогают определить его изменения ?

[Алексей Уколов]

Роман Валеев, вот эти синие иконки, по которым открывается форма создания, будут у вас кнопками-ссылками и вы по клику будете менять URL. Это будет единственная обязанность этих кнопок. Единственной обязанностью конкретного интерфейса добавления будет добавление. А единственной обязанностью вашего самописного роутера будет рендерить нужную страницу в ответ на изменение URL. Таким образом ваше приложение будет проще создавать и дорабатывать. Но это потребует погружения и экспериментов с тем, что я описываю. Но поскольку почти весь современный сложный фронтенд работает примерно так, это время не будет потрачено зря :)
Что касается событий - прочитайте любую статью Getting Started with History API, там будет подробно описано :)

[Роман Валеев]

Алексей Уколов, ну я правильно понял, что это будет похоже на SPA?

За статью и ответы спасибо. Так же приветствуются статейки по теме)

[Алексей Уколов]

Роман Валеев, да, это будет SPA. То, что у вас в вопросе нарисовано — это и есть SPA.