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>
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub