Атрибут up-data

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

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

Атрибут up-data используется для передачи данных с клиентской стороны на сервер при выполнении запроса Unpoly. Данные могут быть объектами JavaScript, простыми строками, числами или JSON-подобными структурами. Они автоматически сериализуются в параметры запроса и доступны на сервере как часть параметров формы или URL.

Пример простого использования:

<button up-target="#content" up-data='{ "user_id": 42, "active": true }'>
  Загрузить данные пользователя
</button>

При нажатии на кнопку Unpoly отправляет запрос на сервер с параметрами user_id=42 и active=true, при этом содержимое блока #content будет обновлено ответом сервера.

Форматы значений

Атрибут up-data поддерживает несколько форматов:

JSON-строка Позволяет передавать сложные структуры данных, включая объекты и массивы.
```
<a href="/filter" up-target="#list" up-data='{"category":"books","tags":["fiction","history"]}'>Фильтровать</a>
```
JavaScript-выражения (без кавычек) Можно использовать ключи и значения напрямую через синтаксис объекта:
```
<button up-target="#content" up-data='{ page: 3, sort: "desc" }'>Следующая страница</button>
```
Простые ключ-значение через HTML-переменные Позволяет привязывать значения к атрибутам элементов:
```
<input type="text" id="search" value="Unpoly">
<button up-target="#results" up-data='{ query: "#search.value" }'>Поиск</button>
```

В этом примере значение поля #search будет автоматически прочитано и передано в параметр query.

Динамическое обновление данных

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

<form id="filterForm">
  <select id="category">
    <option value="books">Книги</option>
    <option value="movies">Фильмы</option>
  </select>
  <button type="submit" up-target="#list" up-data='{ category: "#category.value" }'>Применить</button>
</form>

Значение выбранного элемента select автоматически подставляется в параметр category.

Комбинирование с другими атрибутами Unpoly

up-data тесно интегрируется с up-target, up-method и up-confirm:

up-target определяет, какой элемент на странице будет обновлён ответом сервера.
up-method задаёт метод HTTP-запроса (GET, POST и т.д.), а данные из up-data сериализуются согласно этому методу.
up-confirm позволяет показывать диалог подтверждения перед отправкой данных, при этом данные up-data остаются неизменными.

Пример комплексного использования:

<button 
    up-target="#content" 
    up-method="POST" 
    up-data='{ user_id: 42, action: "delete" }' 
    up-confirm="Вы уверены, что хотите удалить пользователя?">
  Удалить пользователя
</button>

Динамическое расширение данных

Unpoly позволяет программно расширять up-data через JavaScript, что удобно при сложной логике. Для этого используется функция up.data():

up.on('up:click', function(event) {
  event.target.setAttribute('up-data', JSON.stringify({
    user_id: 42,
    token: up.data('csrf_token')
  }));
});

Такой подход обеспечивает гибкость при формировании запросов, позволяя комбинировать статические и динамические данные.

Особенности сериализации

Булевы значения (true/false) сериализуются как 1 и 0 при GET-запросах, и как true/false при POST.
Массивы передаются с повторяющимися ключами, например:
```
up-data='{"tags":["js","unpoly"]}'
```
Будет сериализовано в tags=js&tags=unpoly.
Объекты вложенных уровней сериализуются с использованием квадратных скобок:
```
up-data='{"user": {"id": 1, "name": "Alex"}}'
```
Превращается в user[id]=1&user[name]=Alex.

Использование с формами

Если кнопка или ссылка находится внутри формы, up-data автоматически объединяет данные формы с заданными параметрами. Это позволяет добавлять дополнительные значения без изменения самой формы:

<form id="commentForm">
  <textarea name="comment"></textarea>
  <button up-target="#comments" up-data='{ post_id: 5 }'>Отправить</button>
</form>

При отправке комментария к существующему посту будет передан как текст комментария, так и post_id=5.