Сначала визуализировать страницу и обновить ее через AJAX, используя тот же шаблон HTML

Скажем, у вас есть представление под названием "View Story", которое представляет собой веб-страницу, отображаемую на бэкэнд через Python/Django. На этой странице список комментариев внизу представлен как часть шаблона "Просмотр истории" с использованием системы шаблонов Django (в цикле). Эта страница также позволяет добавить комментарий к списку. Это делается через AJAX, и страница обновляется с новым комментарием (без отправки нового полного запроса страницы).

Теперь, добавляя новый комментарий в конец списка, я хочу, чтобы HTML, сгенерированный для этого нового комментария (что-то внутри <li>), использовал тот же самый код, который использовался для создания исходных комментариев, отправленных на клиент по исходному запросу.

Существует несколько способов сделать это:

  • Первичный рендеринг выдает данные комментария в переменную javascript, и после того, как страница будет отображаться, добавьте контент через javascript. Затем, когда добавляются новые комментарии, тот же javascript можно использовать для визуализации нового. Проблема: с точки зрения поисковой системы я не уверен, что Google сможет индексировать комментарии, если они созданы после того, как страница была отображена - я предполагаю, что не

  • Каждый раз, когда новый комментарий добавляется через AJAX, запрос ajax возвращает фактический HTML для размещения на странице, а не только данные JSON нового комментария. HTML может быть сгенерирован с использованием того же фрагмента шаблона, который использовался для рендеринга исходной страницы. Проблема заключается в том, что он связывает этот запрос AJAX с конкретным представлением или способ его отображения, который мне не нравится.

  • Аналогично # 2, за исключением того, что делается отдельный запрос для извлечения HTML для нового комментария или, возможно, всех комментариев, а список просто стирается и повторно отображается. Не нравится, что это делает его крайне неэффективным и излишне трудоемким.

Итак, чтобы обобщить, я хочу, чтобы избежать дублирования шаблона/HTML-кода для одного представления. И я хотел бы получить несколько советов о том, что сработало для других, потому что я уверен, что это обычный случай, независимо от технологии в фоновом режиме.

Спасибо!

ОТВЕТЫ

Ответ 1

Я думаю, что вариант 2 лучше. Он incremental (только добавляет еще один комментарий при добавлении комментария) и повторно использует рендеринг. Если вам не нравится возвращать только HTML из запроса Ajax, тогда ответ будет структурой JSON, которая включает HTML как только один компонент. Затем вы также можете переносить статус (или что-то еще) без дополнительного запроса на получение HTML-кода.

Вариант 1 является расточительным: сервер должен отобразить страницу так, как она должна сначала отображаться.

Опция 3 также расточительна: зачем делать два запроса, чтобы добавить один комментарий?

Ответ 2

Вот что вы должны сделать:

view_story.html:

bla bla bla

Comments:
<ul id="comments">
{% for comment in comments %}
   <li>{% include "comment_item.html" %}</li>
{% endfor %}
</ul>
<from>Ajax form here</form>

чем вам нужно создать представление для добавления комментариев (ajax):

def add_comment(request):
    comment = Comment(...)
    return render_to_response('comment_item.html', {'comment': comment})

Итак, после отправки вашего запроса ajax в представление add_comment вы получите содержание комментария (один комментарий).. после этого просто нажмите его в список. f.e. используя jQuery следующим образом:

$('ul#comments').append('<li>'+comment_content+'</li>')

Ответ 3

Существует также опция 4:

Скопируйте существующий элемент в список и измените его значения. Это, конечно, менее гибко, чем шаблоны. Вы можете скопировать скрытый элемент, чтобы обрабатывать случай, когда список пуст.

Вы также можете попробовать вариант 2b:

Создайте HTML на сервере как вариант 2, но вместо прямого доступа к базе данных передайте подпрограмму генерации JSON (или объект, который можно легко преобразовать в JSON). Это требует большей работы, но означает, что вы эффективно пишете API одновременно с написанием собственного веб-сайта.

Вариант 1 - это то, что будет использовать любое не веб-приложение. Несмотря на то, что поисковые системы улучшают свою способность обрабатывать AJAX, по-прежнему настоятельно рекомендуется возвращать весь контент в HTML. Я думаю, что Javascript достаточно быстр во всех современных браузерах, что за исключением огромных страниц 1 было бы вполне разумным, за исключением проблемы с SEO.

Существует также вариант 5 - используйте Javascript на сервере для создания страницы и использования того же кода на клиенте. Это, вероятно, самый сложный подход, и я бы не рекомендовал его, если у вас действительно есть веская причина.