amp-live-list：查看宿主文档是否更新

Question

我正在学习这部分教程：https://amp.dev/documentation/guides-and-tutorials/develop/live_blog/?format=websites

任务是显示按钮。

初始代码：

<h1>Posts</h1>
<amp-live-list
  id="my-live-list"
  data-poll-interval="15000"
  data-max-items-per-page="2">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items>

      <div id="1" data-sort-time="1053"  data-update-time="1053">
        0 vpksfnokrq
      </div>

      <div id="2" data-sort-time="444"  data-update-time="444">
        1 pcwunjyecn
      </div>

  </div>
  <div pagination>
    <span class="step-links">


        <span class="current">
            Page 1 of 5.
        </span>


            <a href="?page=2">next</a>
            <a href="?page=5">last &raquo;</a>

    </span>
  </div>

每次在服务器端我都会更改我在 data-sort-time 和 data-update-time 中使用的值。

脚本开始像这样向服务器发送请求： https://127.0.0.1:8888/live_blog?amp_latest_update_time=1056&__amp_source_origin=https%3A%2F%2F127.0.0.1%3A8888

这似乎是从服务器接收到的最大 data-sort-time 值。

此请求的响应：

<!doctype html>
...        
    <h1>Posts</h1>
    <amp-live-list
      id="my-live-list"
      data-poll-interval="15000"
      data-max-items-per-page="2">
      <button update on="tap:my-live-list.update">You have updates!</button>
      <div items>

          <div id="1" data-sort-time="1057"  data-update-time="1057">
            0 eaobaqcvey
          </div>

          <div id="2" data-sort-time="448"  data-update-time="448">
            1 ccswyymlss
          </div>

      </div>
...
</amp-live-list>

嗯，data-sort-time 变了。 问题是按钮没有显示出来

但是一旦我更改 ID，按钮就会显示出来。换句话说，在服务器端，我将 id、data-sort-time 和 data-update-time 设置为相等的值。

<h1>Posts</h1>
<amp-live-list
  id="my-live-list"
  data-poll-interval="15000"
  data-max-items-per-page="2">
  <button update on="tap:my-live-list.update">You have updates!</button>
  <div items>

      <div id="1068" data-sort-time="1068"  data-update-time="1068">
        0 owuswbdsur
      </div>

      <div id="459" data-sort-time="459"  data-update-time="459">
        1 vmwbpzcums
      </div>

  </div>
  <div pagination>
    <span class="step-links">


        <span class="current">
            Page 1 of 5.
        </span>


            <a href="?page=2">next</a>
            <a href="?page=5">last &raquo;</a>

    </span>
  </div>

嗯，这对我来说有点奇怪。我试图更改属于的子 div 的内容。按钮未显示。

我的实验结果：

当 data-sort-time、data-update-time 或 data-update-time 时按钮不显示内容更改。
当 ID 改变时显示按钮。

尽我所能，我无法理解：

1.为什么它发送 data-sort-time 到服务器。这意味着我会必须让网络服务器（如 nginx）以某种方式对此做出反应。但如何反应？

2。如果我设法显示按钮，为什么没有反应 data-sort-time 但在 ids 上？

你能帮帮我吗？

Answer 1

amp-list-list 有两种模式：

无需用户交互即可自动更新。
通过按钮手动更新。

data-update-time改变时会触发自动更新。这意味着内容将自动更新和显示。这对于实时行情（例如体育比分）很有用。

只有在出现具有新 ID 的项目时才会触发手动更新行为。例如，当实时博客条目列表中有新项目时。

您可以单独实施每种模式（例如，通过将所有内容包装在 amp-live-list 中并将当前时间作为数据更新时间来提供页面来自动更新整个页面）或结合两种模式以支持自动更新以前发布的项目。

为了节省用户带宽，amp-live-list 允许额外的 server-side filtering，这意味着您只能 return 自上次更新以来根据 data-sort-time 中包含的内容更改的内容要求。这不是必需的。

回答问题：

这对于服务器端过滤是可选的。可以正常服务（可能更新文档）。
该按钮仅适用于新的实时列表项（按设计）。

amp-live-list：查看宿主文档是否更新

amp-live-list: find out if the host document is updated

amp-html