Как сделать один и тот же элемент несколько раз в AMP? - PullRequest
Новая
       7

Как сделать один и тот же элемент несколько раз в AMP?

0 голосов
/ 16 мая 2018

Предположим, у меня есть следующие json по поводу отзывов пользователей: 

{
  "reviewRating": 4,
  "comment": "this is great"
}

Затем я использую amp-list для просмотра обзоров. 

<amp-list items="." single-item>
  <template type="amp/mustache">
    <!-- How can I render 4 star images here? -->
    <span>Rating: {{reviewRating}}</span>
    <p>{{comment}}</p>
  </template>
</amp-list>

Для обзора Rating, я хочу визуализировать то же количество звездочек в обзоре Rating ключ / значение, чтобы лучше выглядеть и чувствовать. Как я могу сделать это в AMP?

1 Ответ

0 голосов
/ 17 мая 2018

Это возможно путем объединения amp-bind и amp-list: 

<amp-bind-macro id="classForRating" arguments="rating, index" expression="rating >= index ? 'star-full' : (rating >= (index - 0.5) ? 'star-half' : 'star-empty')" ></amp-bind-macro>
<amp-state id="state" src="rating.json"></amp-state>
<amp-list width="136" height="24" src="rating.json" single-item items="rating" noloading>
  <template type="amp-mustache">
    <div class="star-rating" aria-label="rating: {{.}}" [aria-label]="'rating: ' + state.rating">
      <span [class]="classForRating(state.rating, 1)" class="star-empty"></span>
      <span [class]="classForRating(state.rating, 2)" class="star-empty"></span>
      <span [class]="classForRating(state.rating, 3)" class="star-empty"></span>
      <span [class]="classForRating(state.rating, 4)" class="star-empty"></span>
      <span [class]="classForRating(state.rating, 5)" class="star-empty"></span>
    </div>
  </template>
  <div class="star-rating" placeholder>
    <span class="star-empty"></span>
    <span class="star-empty"></span>
    <span class="star-empty"></span>
    <span class="star-empty"></span>
    <span class="star-empty"></span>
  </div>
</amp-list>

Хитрость заключается в использовании одной и той же конечной точки для amp-state и amp-list.Кэширование ответов во время выполнения AMP гарантирует, что это приведет только к одному запросу.Привязки AMP внутри списка усилителей будут оцениваться при визуализации содержимого списка.Это позволяет устанавливать значения звездочек (с помощью классов CSS), используя amp-bind.

Чтобы обеспечить удобство загрузки, я также отключил индикатор загрузки по умолчанию для списка усилителей с помощью атрибута noloading.Вместо этого я использую элемент placeholder, показывающий пустые звезды при загрузке.

Здесь - рабочая версия.

...