Установить состояние после загрузки amp-list / установить состояние с использованием данных amp-list

На чтение 5 мин Опубликовано 16.09.2024

Я загружаю список опций из нашего бэкэнда в AMP-письме, и мы сохраняем выбранную опцию в переменной состояния, которая установлена как значение элемента <input>. Мы хотели бы по умолчанию выбрать первый элемент (это можно сделать при нажатии кнопки), но мы не видим способа сделать это в AMP-письме.

Пример кода:

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async></script>
  <script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>

  <amp-list
    width="auto"
    height="100"
    layout="fixed-height"
    src="https://amp.dev/static/inline-examples/data/amp-list-urls.json"
  >
    <template type="amp-mustache">
      <div class="url-entry">
        <button on="tap:AMP.setState({ selected: '{{title}}' })">{{title}}</button>
      </div>
    </template>
  </amp-list>

  <input type="text" [value]="selected" />
  <button>Отправить</button>
</body>
</html>

Несколько попыток, которые я сделал (все они предполагают, что мы добавляем событие к кнопке):

При нажатии кнопки и если selected равен null, установить selected на первый элемент из ответа списка. Но нет способа получить данные из списка.
То же самое, но попытавшись получить данные из списка из состояния AMP, инициализированного с помощью src. Это недоступно для контекста Email.
Искал какой-либо коллбек после загрузки данных amp-list, чтобы вызвать setState. Насколько я понимаю, у amp-list нет коллбека, который выполняется после загрузки данных.

Содержание

Ответ
Шаги к реализации
Объяснение кода:

Ответ

Для того чтобы задать состояние после загрузки данных в <amp-list> и установить значение по умолчанию, когда данные успешно загружены, в контексте AMP Email, действительно могут возникнуть некоторые ограничения. Однако, используя комбинацию свойств AMP и подходящих событий, вы можете достичь желаемого результата. Вот как это можно сделать:

Шаги к реализации

Инициализация состояния: Установите начальное состояние для выбора, чтобы оно было пустым.
Использование переменных: Используйте переменные AMP для хранения данных из <amp-list>.
Кнопка по умолчанию: Создайте кнопку, которая будет связываться с набором состояния, чтобы выбрать первый элемент из списка, как только данные загрузились.

Вот пример, как это может выглядеть:

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js" async></script>
  <script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>

  <amp-state id="myList">
    <script type="application/json">
      {
        "items": []
      }
    </script>
  </amp-state>

  <amp-list
    width="auto"
    height="100"
    layout="fixed-height"
    src="https://amp.dev/static/inline-examples/data/amp-list-urls.json"
    on="load:myList.items = event.value" 
  >
    <template type="amp-mustache">
      <div class="url-entry">
        <button on="tap:AMP.setState({ selected: '{{title}}' })">{{title}}</button>
      </div>
    </template>
  </amp-list>

  <input type="text" [value]="selected" />
  <button on="tap:AMP.setState({selected: myList.items[0] ? myList.items[0].title : ''})" 
          [disabled]="!myList.items.length">
    Выбрать первый элемент
  </button>

  <button>Отправить</button>

</body>
</html>

Объяснение кода:

amp-state: Мы используем <amp-state> для хранения списка объектов, которые будут загружены в <amp-list>. Это позволит легко сослаться на элементы списка после их загрузки.
on="load:myList.items = event.value": Это событие связывает данные, загружаемые из <amp-list>, с состоянием myList.items. Как только данные загружены, они будут храниться в myList.items.
Кнопка для установки первого элемента: Вторая кнопка устанавливает значение состояния selected на myList.items[0].title, если массив не пуст. Эта кнопка активируется только в том случае, если длина массива больше нуля, благодаря атрибуту [disabled].
Вывод значения: Значение selected отображается в текстовом поле <input>, позволяя пользователю видеть текущий выбор.

С помощью этого решения вы сможете управлять состянием выбранного элемента в AMP Email, получая данные из вашего бэкенда через <amp-list> и устанавливая значение по умолчанию.