amp-html - AMP 列表 - 如果我们没有收到 API 的响应，如何删除空白？

Question

我们有 AMP 页面，我们从服务器获取 3 个列表，并将其绑定(bind)到客户端。 Here是同样的 fiddle 。

但是由于输出是动态的并且我们将高度指定为 100，因此在代码 here 中其中第二个列表返回空 json，我们看到很多空白，这是不希望的。

获取空列表的代码是:

<amp-list width="auto" height="100" layout="fixed-height" src="https://ampbyexample.com/json/examples-empty.json" class="m1">
    <template type="amp-mustache" id="amp-template-id">
      <div><a href="{{url}}">{{title}}</a></div>
    </template>
</amp-list

我们如何摆脱这个固定高度的 AMP 列表并根据从服务器接收到的内容调整高度？

我读过类似的内容 here但我无法理解这一点。有人可以分享一下如何解决这个问题吗？

Answer 1

目前 amp-list 无法实现此目的。您可以使用amp-access反而。该方法是在 amp-access authorization 端点中返回 JSON 数据。根据数据，您可以在页面上动态呈现内容:

<section amp-access="items">
  <template amp-access-template type="amp-mustache">
    {{#items}}
    <div><a href="{{url}}">{{title}}</a></div>
    {{/items}}
  </template>
</section>