AMP
  • email

Dynamically updating items in a feed

Introduction

This sample demonstrates how to display a feed of data, allowing the user to go through a large number of items in an email without having to scroll.

The sample uses a combination of amp-list, to fetch the initial items from the server and amp-form, to "refresh" a single item, by making a new server request.

Styles

We use CSS to hide the initially fetched item after the form is first submitted.

We also define a layout that allows us to have fixed card sizes, to ensure form submissions don't result in content jumps.

<style amp-custom>
  .amp-form-submit-success .initial-content,
  .amp-form-submitting .initial-content,
  .amp-form-submit-error .initial-content {
    display: none;
  }

  .card {
    width: 160px;
    height: 120px;
    margin: 10px;
    float: left;
    position: relative;
  }

  .card .next-button {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
</style>

Single item template

Define a template for a single item inside a card and give it an id. This template is used by amp-form for displaying new items.

In this case, we use a single amp-img.

<template id="item-template"
  type="amp-mustache">
  <amp-img src="{{items.imageUrl}}"
    layout="fixed"
    width="160"
    height="90"></amp-img>
</template>

Initial list of items

We define a template for the initial items and their layout and give it an id, allowing us to use it subsequently in an amp-list. This template is used by amp-list for fetching the initial up-to-date contents from the server.

It contains in itself an amp-form for each item which references the template defined above referred by its id. By using a different template for the amp-form, we're able to "refresh" a part of the content, namely the image in this case.

This template contains the same markup (in this case, a single amp-img) as used in the template above to render the initial items. This is wrapped inside <div class="initial-content"> which becomes hidden the first time the user submits the form.

<template id="list-template"
  type="amp-mustache">
  <form class="card"
    method="post"
    action-xhr="https://amp.dev/documentation/examples/api/photo-stream?single&width=160&height=90">
    <div class="initial-content">
      <amp-img src="{{imageUrl}}"
        layout="fixed"
        width="160"
        height="90"></amp-img>
    </div>

    <div submit-success
      template="item-template"></div>

    <input class="next-button"
      type="submit"
      value="Next">
  </form>
</template>

We use amp-list to render the initial items from the server using the template defined above referred by its id.

The height matches the combined height of our cards and their margins. The initial server response defines the number of cards to be displayed (in this case four).

<amp-list template="list-template"
  src="https://amp.dev/documentation/examples/api/photo-stream?width=160&height=90&items=4"
  layout="fixed"
  width="360"
  height="280">
</amp-list>
Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub