AMP: Как обрабатывать сложную условную логику в AMP?

Question

Мы хотим вставить условный динамический контент на наши AMP-страницы. Мы используем усы, чтобы добавить динамический контент.

Усы менее логичны (с поддержкой базовых, если еще), то есть упомянутые здесь. Они также предложили использовать Handlebar JS для такой сложной условной логики, но, похоже, у нас здесь нет альтернативы AMP.

Один из способов решения этой проблемы - отправить простое логическое значение с сервера, чтобы избежать всех условий И / ИЛИ на стороне клиента, но нам придется отправить слишком много таких переменных, если мы перейдем на этот подход. Как мы должны справляться с такими сложными условиями в AMP?

Answer 1

Для более сложных случаев использования вы можете комбинировать amp-bind и amp-list. Хитрость в том, что привязки оцениваются как часть рендеринга списка усилителей. Это означает, что вы можете использовать выразительность amp-bind вместе с логикой шаблона усов:

  <amp-state src="amp-list-state.json" credentials=include id=state></amp-state>
  <amp-list  src="amp-list-state.json" credentials=include height="560" layout="fixed-height"   >
     <template type="amp-mustache">
       <li>{{.}}
          <div [hidden]="state.user.likesPickups">
            Convertibles ...
         </div>
         <div [hidden]="!state.user.likesPickups && state.user.age < 30">
            Pickups  ...
         </div>
       </li>
    </template>    
  </amp-list>

Примечание. Лучше использовать одну и ту же конечную точку JSON как для состояния усилителя, так и для списка усилителей. Это гарантирует, что во время загрузки страницы будет сделан только один запрос.

Ссылка на образец: https://amp-demos.glitch.me/amp-list-state.html