amp-live-list
簡介
amp-live-list 元件新增了對 AMP 網頁發布即時更新的支援，以便在來源文件中提供新內容時使用。這非常適合用來實作即時部落格。在此處尋找即時部落格的範例：這裡。
換句話說，AMP 執行階段會輪詢伺服器，以取得原始文件的更新，並自行擷取。伺服器可以傳回完整的 AMP 網頁 或部分內容，而執行階段會無縫地就地更新網頁。
設定
在標頭中匯入 amp-live-list 元件。
<script async custom-element="amp-live-list" src="https://cdn.ampproject.org/v0/amp-live-list-0.1.js"></script>
使用者互動後更新：即時部落格
使用 data-poll-interval 屬性來指定 amp-live-list 元件輪詢新資料的頻率。最短間隔為 15 秒。使用 data-max-items-per-page 來指定頁面上顯示的最大項目數。如需所有屬性的詳細說明，請參閱 amp-live-list。
使用 on="tap:my-live-list.update" 從伺服器載入最新變更。當 AMP 執行階段發現新的文件變更時，就會顯示一個按鈕。請注意，按鈕必須定義為 amp-live-list 的直接子項。
amp-live-list 必須在 <div items> 下方包含項目清單。每個項目都有特定的 ID，而 amp-live-list 將尋找具有新 ID 的項目。
按一下「您有更新」按鈕後，新內容會顯示在示範欄中 (如果透過桌上型電腦存取示範，則為右側的欄)。程式碼欄 (如果透過桌上型電腦存取示範，則為中央的欄) 不會自行更新，但如果您想查看頁面上的所有項目，請重新載入頁面。
<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>
amp-live-list 的內容是隨機產生的 (為了更容易且可重複的測試)。自動更新
如果您想要在沒有使用者互動的情況下更新現有的清單項目，您需要透過 data-update-time 屬性指定執行更新的時間。以下範例將顯示並自動更新目前時間。此方法非常適合顯示即時比分或即時市場價值。
目前時間是：
<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 上編輯範例