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

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

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

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


amp-html mustache amp-mustache
person Sahil Sharma    schedule 27.08.2018    source источник
comment
Не могли бы вы привести пример того, чего вы хотите достичь?   -  person Sebastian Benz    schedule 27.08.2018
comment
У нас есть веб-страница, на которой отображаются цены на автомобили, предложения и т. д. в зависимости от выбранного пользователем города. Теперь, если у нас есть файлы cookie пользователя и пользователь повторно заходит на сайт через AMP, мы хотим показать цены и предложения на основе файлов cookie пользователя. Проблема в том, что логика для отображения цены, предложений имеет несколько вариантов if, else if (вместе с OR, AND) на стороне пользовательского интерфейса. Если в текущей логике пользовательского интерфейса есть условие вроде (A && B), нам придется переписать его как логику для (A), а затем для (B).   -  person Sahil Sharma    schedule 27.08.2018

Ответы (1)


arrow_upward
3
arrow_downward

Для более сложных вариантов использования вы можете комбинировать amp-bind и amp-list. Хитрость заключается в следующем: привязки оцениваются как часть рендеринга 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 как для amp-state, так и для amp-list. Это гарантирует, что при загрузке страницы будет сделан только один запрос.

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

person Sebastian Benz    schedule 27.08.2018
comment
Ссылка, которой вы поделились, просто дает результат. Ввод будет исходить из host/amp-list-state.json, НО где код. В соответствии с вашим кодом он должен показывать что-то еще, когда вы печатаете Pickups... только если возраст пользователя составляет 30 лет. - person Sahil Sharma; 27.08.2018
comment
Документированной версии примера нет, вы можете взглянуть на исходный код, чтобы убедиться, что он работает (нет логики на стороне сервера). Я использую атрибут hidden, чтобы скрыть элемент, если пользователям не нравятся пикапы и возраст менее 30 лет. - person Sebastian Benz; 27.08.2018
comment
Спасибо. Это работает. Надеюсь, что такие скрытые переменные не окажут никакого влияния на поисковую оптимизацию или какое-либо другое влияние. - person Sahil Sharma; 27.08.2018