amp-live-list

Introduction

The amp-live-list component adds support for publishing live updates to AMP pages as new content becomes available in the source document. This works great for implementing live blogs. Find an example of a live blog here.

In other words, the AMP runtime will poll the server for updates to the origin document, fetching itself. The server can return the entire AMP page or parts of it, and the runtime updates the page in-place seamlessly.

Setup

Import the amp-live-list component in the header.

<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>

Update after user interaction: live blog

Use the data-poll-interval attribute to specify how frequently the amp-live-list component will poll new data. The minimum interval is 15 seconds. Use data-max-items-per-page to specify the maximum number displayed on the page. For an extensive explanation of all the attributes, refer to amp-live-list.

Use on="tap:my-live-list.update" to load the latest changes from the server. A button will appear when the AMP runtime discovers new document changes. Note that the button has to be defined as a direct child of amp-live-list .

An amp-live-list must contain a list of items below <div items>. Each item has a specific id and the amp-live-list will look for items with new id.

By clicking on the button "You have updates", new content is displayed on the demo column (the one on the right if the demo is accessed by desktop). The code column (the one in the center if the demo is accessed by desktop) does not update itself, but if you want to see all the items on the page, reload the page.

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="5" id="amp-live-list-insert-blog">
  <button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
  </div>
</amp-live-list>

the contents of the amp-live-list are generated randomly (for easier and repeatable testing).

Automatic update

If you want to update existing list items without user interaction, you need to specify via the data-update-time attribute when the update has been performed. The following example will display and automatically update the current time. This approach is great for displaying live scores or live market values.

The time is:

<amp-live-list layout="container" data-poll-interval="15000" data-max-items-per-page="1" id="amp-live-list-update">
  <button update on="tap:amp-live-list-insert-blog.update">You have updates</button>
  <div items>
    <div id="time" data-sort-time="1234567" data-update-time="" class="time">
      The time is: <time></time>
    </div>
  </div>
</amp-live-list>

需要进一步说明？

如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。

前往 Stack Overflow

一项无法解释的功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例