Недавно мне поручили создать одностраничное приложение (SPA) для Flatiron School. Требования были достаточно простыми: используйте бэкэнд Rails API и интерфейс Javascript/HTML/CSS, чтобы создать CRUD-приложение, которое имеет несколько запросов на выборку из интерфейса. Я решил придерживаться своего обычного плана: сделать что-то, что я действительно буду использовать.
Я начал работу над своим приложением для списка просмотра фильмов WatchNext и быстро понял, что не смогу хранить всю информацию в одном представлении, как планировал изначально. Вместо этого мне нужно было бы разделить представления Watchlist, Search и Watched с помощью HTML и Javascript.
Решение, к которому я пришел, состояло в том, чтобы создать div для каждого представления в файле индекса для моего приложения.
В этом фрагменте вы можете видеть, что представления для поиска и просмотра скрыты по умолчанию. Это потому, что я хотел, чтобы мой список наблюдения отображался по умолчанию при загрузке страницы. Я дополнительно усилил это, включив следующий Javascript в конец моего файла индекса, чтобы вызвать функцию начальной страницы.
Настоящая магия происходит с кнопками панели навигации в верхней части страницы. Я создал ссылки для каждого из трех представлений и прикрепил к каждому из них следующие слушатели.
Как видите, я просто настраиваю класс div для каждого, чтобы он был скрыт или нет, чтобы отобразить желаемое представление. Каждое из представлений все еще существует в документе, но скрыто от просмотра, когда оно не требуется. Это простой способ разрешить несколько представлений, сохраняя при этом все на одной странице.
