Использование бесконечной прокрутки и History API
Я использую Бесконечная прокрутка на своем сайте. У меня есть лента комментариев к каждому сообщению, которая использует бесконечную ленту. Когда кто-то нажимает на один из комментариев, ответы на комментарий должны загружаться. Когда кто-то нажимает на один из ответов на комментарий, этот ответ отображается. По умолчанию ответы на комментарии не содержат ответов. При каждом просмотре сообщение будет отображаться вместе с родительским комментарием. Так что у меня будет 3 представления:
Fist view
Post
|
Comments
Second View
Post
|
Comment
|
Replies
Third View
Post
|
comment
|
reply
Обычно это очень просто создать, однако я хотел бы создать все это с помощью History API. Так, например, если пользователь попадает на первое представление, то он нажимает на комментарий, второе представление должно быть загружено с помощью PushState, а лента новых ответов должна быть загружена с использованием Ajax. Вот тут я путаюсь. Как фид может сохранить свое место, если пользователь нажмет кнопку «Назад». Так, например, если они находятся в ответах и наносят ответный удар, они будут показаны в том же месте, что и в ленте комментариев. Есть ли более простой способ сделать это.
P.S. Это очень похоже на систему комментариев Twitter.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method
state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object.
Вы можете включить в свое состояние позицию прокрутки на странице или уникальный идентификатор комментария, на который нажали. Затем используйте scrollIntoView для элемента, когда вы выталкиваете состояние.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Обновлено:
Чтобы включить текущую позицию в текущее состояние перед открытием комментария, используйте replaceState, чтобы добавить текущую позицию в состояние перед нажатием нового состояния.
https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method
Ах правда. В этом случае вы можете использовать replaceState прямо перед отправкой нового состояния. developer.mozilla.org/en-US/docs/Web/API/… Я отредактировал свой ответ.
Это хорошая идея. Как вы думаете, вместо того, чтобы просто дублировать контейнер комментариев, очистить его, а затем скрыть исходный контейнер комментариев, лучше? Таким образом, в новом контейнере будут храниться ответы на комментарий, по которому щелкнули, а в старом контейнере по-прежнему будут храниться все комментарии, но они будут скрыты. И затем, когда пользователь щелкнет назад, где пользователь будет находиться в объекте состояния?
Я думаю, что дублирование контейнера комментариев может быть излишним. Я думаю, что будет достаточно создать дубликат конкретного родительского комментария с использованием того же кода рендеринга, который вы используете для рендеринга комментариев в другом представлении.
Да, но объект состояния предназначен для комментария, в который я вступаю. Если я вернусь, то объект состояния будет технически неизвестен. Так что, если я вернусь, я все равно потеряю свою позицию в ленте.