Обновите представление с помощью JavaScript без дублирующего кода

Question

У меня есть приложение php, которое печатает список «блоков» на странице. блок включает в себя дату, время, заголовок и некоторую другую информацию.

Пользователь должен иметь возможность добавить новый «блок» на страницу, и я бы хотел, чтобы новый блок появлялся в списке существующих блоков без обновления страницы.

В данный момент я делаю это с помощью jquery. пользователь добавляет новый блок, а затем jquery вставляет новый элемент DOM, который отлично работает.

ПРОБЛЕМА: это означает, что «блок» отображается двумя разными способами. Один из способов - с помощью php, когда список изначально печатается. Другой способ - с Jquery, когда добавляется новый блок.

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

как php и jquery могут использовать один и тот же код для рендеринга отдельного блока?

Answer 1

Без примера кода трудно дать вам реальный совет. Но в целом у вас есть решение PHP, которое будет состоять из основного сценария PHP, а затем фрагмента, который выводит только один блок. Фрагмент может быть включен в цикл с переданными значениями для генерации главной страницы, а позже может быть тем же фрагментом, который вызывается без каких-либо значений через AJAX и вставляется в DOM. Или второй вариант - использовать функцию jQuery .clone () (https://api.jquery.com/clone/).), которая может клонировать нужный вам блок, но вам все равно нужно будет очистить все значения, если вы этого хотите. Или в конечном итоге вы можете включить один из них. блокировать без значений и скрыть его с помощью CSS, а после клонирования просто измените его отображение с none на block или любым другим отображаемым свойством.