Функция up.render

Функция up.render является ключевым инструментом библиотеки Unpoly для программного обновления частей страницы без полной перезагрузки. Она позволяет динамически загружать HTML, обрабатывать его и вставлять в DOM, поддерживая все возможности Unpoly, включая анимации, фрагменты и событийные хуки.

Основное назначение

up.render используется для:

  • Загрузки контента с сервера через AJAX.
  • Обновления одного или нескольких фрагментов DOM.
  • Применения эффектов вставки и анимаций, заданных в Unpoly.
  • Интеграции с событиями жизненного цикла элементов (up:fragment:loaded, up:content:loaded).

В отличие от стандартных AJAX-запросов, up.render автоматически применяет все настройки Unpoly, включая селекторы фрагментов и автоматическую обработку ссылок и форм.

Синтаксис

up.render(target, options)

  • target — URL или объект с HTML-контентом для вставки. Может быть:

    • Строкой с URL, например '/posts/42/edit'.
    • Объектом { html: '<div>...</div>' }.
    • Формой HTMLFormElement для отправки через AJAX.

  • options — объект с настройками. Основные ключи:

    • target — CSS-селектор, указывающий, куда вставлять контент.
    • fragment — CSS-селектор для выбора конкретной части HTML с сервера.
    • method — HTTP-метод запроса (GET, POST, PUT и т.д.).
    • params — дополнительные параметры запроса.
    • cache — управление кэшированием (true, false, 'reload').
    • replace — замена содержимого целевого элемента (true) или добавление (false).
    • focus — элемент, на который будет установлен фокус после вставки.
    • animation — тип анимации (fade, slide, кастомная функция).

Примеры использования

Загрузка фрагмента по URL и вставка в элемент с id #main:

up.render('/posts/42', {
  target: '#main',
  fragment: '#post-content',
  animation: 'fade'
});

В этом примере будет выполнен GET-запрос к /posts/42, выбрана часть ответа с id post-content, и она плавно заменит содержимое элемента #main.

Отправка формы через AJAX:

const form = document.querySelector('#comment-form');

up.render(form, {
  target: '#comments',
  animation: 'slide'
});

Unpoly автоматически извлечет данные формы, выполнит POST-запрос и вставит ответ в элемент #comments с анимацией.

Добавление параметров запроса вручную:

up.render('/posts', {
  target: '#posts-list',
  params: { category: 'javascript', page: 2 },
  method: 'GET'
});

Это позволяет динамически передавать фильтры, сортировку или пагинацию без перезагрузки страницы.

Работа с фрагментами

Фрагменты — это отдельные части HTML, которые можно обновлять независимо. up.render умеет:

  • Извлекать нужный фрагмент с помощью селектора fragment.
  • Автоматически заменять или добавлять контент в целевой элемент.
  • Сохранять привязанные события и состояния других элементов на странице.

Пример выбора нескольких фрагментов:

up.render('/dashboard', {
  fragment: ['#stats', '#notifications'],
  target: ['#stats-container', '#notifications-container']
});

Каждый фрагмент ответа вставляется в соответствующий элемент на странице.

Настройка анимаций

Unpoly поддерживает стандартные анимации, а также кастомные функции:

up.render('/posts/42', {
  target: '#main',
  animation: function(oldEl, newEl, done) {
    oldEl.style.opacity = 0;
    newEl.style.opacity = 0;
    oldEl.parentNode.replaceChild(newEl, oldEl);
    setTimeout(() => newEl.style.opacity = 1, 10);
    setTimeout(done, 300);
  }
});

Анимация получает старый и новый элемент, а done нужно вызвать после завершения, чтобы Unpoly продолжил обработку событий.

Обработка событий

up.render генерирует ряд событий жизненного цикла:

  • up:request — перед выполнением запроса.
  • up:success — после успешного получения ответа.
  • up:fragment:loaded — после вставки фрагмента в DOM.
  • up:content:loaded — после полной загрузки нового контента и инициализации всех элементов.

Эти события можно использовать для логирования, валидации или дополнительной инициализации скриптов.

document.addEventListener('up:fragment:loaded', event => {
  console.log('Фрагмент загружен:', event.target);
});

Кэширование и повторное использование

up.render умеет кэшировать ответы:

  • cache: true — будет использоваться кэш, если есть.
  • cache: 'reload' — принудительно обновляет содержимое, игнорируя кэш.
  • cache: false — отключает кэширование для конкретного запроса.

Кэширование особенно полезно при динамических панелях и табах, чтобы уменьшить количество сетевых запросов.

Особенности и тонкости

  • up.render поддерживает обновление нескольких элементов одновременно.
  • При вставке нового HTML Unpoly автоматически обрабатывает <script> и <style> внутри фрагмента.
  • Если целевой элемент не найден, up.render создаст предупреждение в консоли, но не приведёт к ошибке.
  • Можно использовать с up.layer для работы с модальными окнами и вложенными слоями.

Вывод

up.render обеспечивает мощный и гибкий способ обновления контента без перезагрузки страницы, объединяя преимущества AJAX, динамического DOM-обновления и встроенных анимаций Unpoly. Она является центральным инструментом для построения интерактивных интерфейсов, поддерживая фрагменты, формы, кастомные анимации и события жизненного цикла.

Оглавление