如何在AMP中多次渲染同一元素？

Question

假設我有關於用戶評論的以下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>

對於reviewRating，我想從reviewRating鍵/值中渲染相同數量的星星，以提供更好的外觀。 如何在AMP中做到這一點？

Answer 1

通過組合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-列表中的AMP綁定。 這樣就可以使用amp-bind設置星形值（通過CSS類）。

為了提供良好的加載體驗，我還使用noloading屬性禁用了放大器列表的默認加載指示器。 相反，我使用的是placeholder元素，在加載時顯示空星星。

這是一個工作版本。