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-bind设置星值（通过CSS类）。

为了提供良好的加载体验，我还使用noloading属性禁用了amp-list的默认加载指示符。相反，我在加载时使用显示空星的placeholder元素。

Here是一个有效的版本。

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

1 个答案: