List View

Всем привет! В прошлой статье мы рассмотрели компонент Query, используемый для написания GraphQL-запросов. И там же описывалось, что сформированный запрос отправляется на API-сервер через компонент Connector, после чего полученный результат выводится на странице через List View, о котором и пойдет более детальный разговор в этой статье. На самом деле это тоже очень важный и довольно мощный компонент и использовать его можно не только непосредственно внутри компонента Connector, но и внутри других компонентов для вывода имеющихся в них массивов объектов. Если вы внимательно изучите вот этот пример, то увидите, что компонент ListView используется для вывода комментариев пользователя внутри объекта пользователя. Давайте внимательней рассмотрим этот пример. В нем выполняется запрос: В нем мы получаем конкретного пользователя по юзернейму. Помимо некоторых полей объекта User мы еще и запрашиваем 3 комментария (подзапрос Resources с типом Comment), а в каждом этом комментарии мы еще и запрашиваем CommentTarget, то есть топик, к которому оставлен комментарий. В ответ на запрос мы получаем следующие данные с сервера: В шаблоне для вывода объекта пользователя мы используем компонент ObjectView. В нем для вывода комментариев (массива объектов Resources) мы использовали компонент ObjectField, указав ему name=Resources. И вот здесь самое интересное: получив из объекта пользователя массив комментариев Resources, ObjectField, определив, что это массив, передает его в специальный контекст для передачи массива объектов вглубь. Теперь на любом уровне вложенности ниже можно вывести эти объекты в цикле с помощь компонента ListView. Таким образом ListView можно использовать для вывода в цикле различных Array-свойств объектов. К примеру, посмотрите внимательно еще и вот этот шаблон. В нем я из полученных объектов шаблонов вывожу имена их прямых потомков. http://joxi.ru/brReEnMh7nnV4A Так же аналогичным способом для вывода вложенных одиночных объектов можно использовать ObjectView. Второй вариант использования компонента ListView (и он же по сути основной) - это вызов его внутри компонента Connector для вывода полученных данных в цикле. Этот вариант подробно рассматривался в прошлой статье.