Чтение и запись мета-данных

Unpoly — это современная библиотека для создания динамических веб-приложений без полной перезагрузки страниц. Одной из ключевых возможностей является работа с мета-данными, которые позволяют хранить состояние страницы, управлять поведением компонентов и передавать дополнительные данные между клиентом и сервером.

Методы доступа к мета-данным

Unpoly предоставляет удобный интерфейс для чтения и записи мета-данных через объект up.metas. Методы обеспечивают работу как с глобальными мета-данными страницы, так и с мета-данными отдельных элементов.

Чтение мета-данных

// Получение значения мета по ключу
let value = up.metas.get('ключ');

// Получение всех мета-данных элемента
let allMetas = up.metas.get($element);
  • up.metas.get(key) возвращает значение по указанному ключу.
  • Если ключ отсутствует, возвращается undefined.
  • Для получения мета-данных конкретного элемента можно передать элемент или селектор в качестве аргумента.

Запись мета-данных

// Установка значения мета
up.metas.set('ключ', 'значение');

// Установка нескольких значений
up.metas.set({
  'ключ1': 'значение1',
  'ключ2': 'значение2'
});
  • Можно записывать как одно значение, так и сразу несколько ключей.
  • Изменение мета-данных автоматически учитывается при последующих вызовах up.metas.get.

Работа с мета-данными элементов

Каждый DOM-элемент может хранить собственные мета-данные. Это особенно удобно для динамических компонентов, которые могут содержать локальное состояние.

let element = document.querySelector('#my-component');

// Присвоение локальной мета
up.metas.set(element, 'user-id', 42);

// Получение локальной мета
let userId = up.metas.get(element, 'user-id');
  • Передача элемента первым аргументом позволяет разграничить глобальные и локальные мета-данные.
  • Локальные мета-данные могут быть сериализованы при отправке формы или при обновлении фрагмента страницы через Unpoly.

Обновление мета при навигации

Unpoly автоматически синхронизирует мета-данные с историей браузера. Методы up.metas.push и up.metas.replace позволяют управлять мета при изменении состояния страницы.

// Добавление нового состояния в историю
up.metas.push({ page: 2 });

// Замена текущего состояния
up.metas.replace({ filter: 'active' });
  • push добавляет новую запись в историю браузера, сохраняя предыдущие состояния.
  • replace изменяет текущую запись истории, не создавая новую.
  • Метаданные, добавленные через эти методы, автоматически применяются при навигации назад и вперёд.

Взаимодействие с сервером

Мета-данные могут быть отправлены на сервер вместе с запросами Unpoly. Это позволяет серверу принимать решения, основываясь на текущем состоянии страницы или локальных данных компонентов.

up.fragment.show('/users', {
  data: up.metas.get() // Отправка всех мета-данных
});
  • Можно отправлять как глобальные, так и локальные мета-данные.
  • Сервер получает данные в формате ключ–значение и может использовать их для фильтрации, пагинации или других операций.

События изменения мета-данных

Unpoly предоставляет события, которые срабатывают при изменении мета-данных:

up.on('up:meta:change', function(event) {
  console.log(event.key, event.value, event.previousValue);
});
  • event.key — ключ изменённого мета.
  • event.value — новое значение.
  • event.previousValue — предыдущее значение.
  • События позволяют отслеживать динамические изменения состояния страницы и обновлять интерфейс без перезагрузки.

Использование мета-данных для условного рендеринга

Мета-данные активно применяются для управления видимостью компонентов и загрузкой фрагментов:

if (up.metas.get('showBanner')) {
  up.fragment.show('#banner', '/banner');
} else {
  up.fragment.hide('#banner');
}
  • Доступ к состоянию через мета-данные позволяет строить реактивные интерфейсы без полного перехода по страницам.
  • Локальные мета-данные компонентов позволяют независимо управлять видимостью и состоянием каждого элемента.

Сериализация и хранение состояния

Для сохранения состояния при перезагрузке страницы или при возврате по истории можно сериализовать мета-данные в JSON:

let serialized = JSON.stringify(up.metas.get());
localStorage.setItem('pageMeta', serialized);

// Восстановление
let restored = JSON.parse(localStorage.getItem('pageMeta'));
up.metas.set(restored);
  • Сериализация позволяет сохранить глобальные и локальные состояния.
  • Это важно для реализации SPA-подобного поведения с полным контролем за состоянием страницы.

Интеграция с формами

Unpoly автоматически учитывает мета-данные при отправке форм через up.submit. Можно добавлять скрытые поля, чтобы сервер получал актуальные значения мета-данных:

up.submit('#filter-form', {
  data: up.metas.get()
});
  • Значения мета-данных могут быть объединены с полями формы.
  • Это позволяет серверу получать полное состояние интерфейса, не требуя отдельного API для состояния.

Методы чтения и записи мета-данных в Unpoly обеспечивают гибкий и мощный инструмент для управления состоянием страниц и компонентов. Их использование позволяет строить динамичные, реактивные интерфейсы без необходимости полной перезагрузки и лишних AJAX-запросов.

Оглавление