List View

Fi1osof
17 мая 2019 г., 17:13

List View

Всем привет!

В прошлой статье мы рассмотрели компонент Query, используемый для написания GraphQL-запросов. И там же описывалось, что сформированный запрос отправляется на API-сервер через компонент Connector, после чего полученный результат выводится на странице через List View, о котором и пойдет более детальный разговор в этой статье.

На самом деле это тоже очень важный и довольно мощный компонент и использовать его можно не только непосредственно внутри компонента Connector, но и внутри других компонентов для вывода имеющихся в них массивов объектов. Если вы внимательно изучите вот этот пример, то увидите, что компонент ListView используется для вывода комментариев пользователя внутри объекта пользователя.

Давайте внимательней рассмотрим этот пример. В нем выполняется запрос:
query user { object: user ( where: { username: "Fi1osof" } ){ id username fullname image Resources ( first: 3 orderBy: createdAt_DESC where: { type: Comment } ){ ...resource CommentTarget{ ...resource } } } } fragment resource on Resource{ id name content uri }
В нем мы получаем конкретного пользователя по юзернейму. Помимо некоторых полей объекта User мы еще и запрашиваем 3 комментария (подзапрос Resources с типом Comment), а в каждом этом комментарии мы еще и запрашиваем CommentTarget, то есть топик, к которому оставлен комментарий.

В ответ на запрос мы получаем следующие данные с сервера:
{ "data": { "object": { "id": "cjoe87z9f001b0d9683ysg0m4", "username": "Fi1osof", "fullname": "", "image": "9da9e7e309fd4e77cf42c02a7a42142e.jpeg", "Resources": [ { "id": "cjvs9myrqbx150a8967zkkda4", "name": "Дима, в статью дописал ссылку на видео.", "uri": "/comments/topics/query.html/dima,-v-statyu-dopisal-ssylku-na-video..html", "content": "...", "__typename": "Resource", "CommentTarget": { "id": "cjvs5l3vqbtvo0a895brraes7", "name": "Query", "uri": "/topics/query.html", "content": "...", "__typename": "Resource" } }, { "id": "cjvs8xobxbwn10a89tmi0wxk7", "name": "Кстати, на случай, если ты вдруг не понял как реда", "uri": "/comments/topics/query.html/kstati,-na-sluchay,-esli-ty-vdrug-ne-ponyal-kak-reda.html", "content": "...", "__typename": "Resource", "CommentTarget": { "id": "cjvs5l3vqbtvo0a895brraes7", "name": "Query", "uri": "/topics/query.html", "content": "...", "__typename": "Resource" } }, { "id": "cjvs8t9z8bwin0a89kyf4v6tt", "name": "Все, вижу, ты сделал поддомен. Вот на него и надо", "uri": "/comments/topics/query.html/vse,-vizhu,-ty-sdelal-poddomen.-vot-na-nego-i-nado.html", "content": "...", "__typename": "Resource", "CommentTarget": { "id": "cjvs5l3vqbtvo0a895brraes7", "name": "Query", "uri": "/topics/query.html", "content": "...", "__typename": "Resource" } } ], "__typename": "User" } } }
В шаблоне для вывода объекта пользователя мы используем компонент ObjectView. В нем для вывода комментариев (массива объектов Resources) мы использовали компонент ObjectField, указав ему name=Resources. И вот здесь самое интересное: получив из объекта пользователя массив комментариев Resources, ObjectField, определив, что это массив, передает его в специальный контекст для передачи массива объектов вглубь. Теперь на любом уровне вложенности ниже можно вывести эти объекты в цикле с помощь компонента ListView.

Таким образом ListView можно использовать для вывода в цикле различных Array-свойств объектов. К примеру, посмотрите внимательно еще и вот этот шаблон. В нем я из полученных объектов шаблонов вывожу имена их прямых потомков. http://joxi.ru/brReEnMh7nnV4A

Так же аналогичным способом для вывода вложенных одиночных объектов можно использовать ObjectView.

Второй вариант использования компонента ListView (и он же по сути основной) - это вызов его внутри компонента Connector для вывода полученных данных в цикле. Этот вариант подробно рассматривался в прошлой статье.
Написал статью про добавление кастомных компонентов.

Добавить комментарий