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 上編輯範例