amp-list 不打印从连接的 JSON 文件返回的数据

Question

我正在尝试实施 amp-list 以根据用户来自哪里允许使用不同的货币。我已经实现了 amp-list 元素并创建了一个 JSON 文件（这是一个 CORS url），其中包含使用正确语法的数据。

但是 amp-list 不打印数据，而是打印一个空白区域。 HTML 模板是：

<amp-list width="auto"
  height="50"
  layout="fixed-height"
  src="/amp-price/57938">
  <template type="amp-mustache">
    <p class="price align-center {{test}}">{{price}}</p>
  </template>
</amp-list>

JSON 响应是：

{"items": [{"price": "\u00a321.59", "test": "test"}]}

但是渲染出来的 HTML 是：

<amp-list width="auto" height="50" layout="fixed-height" src="/amp-price/57938" class="i-amphtml-element i-amphtml-layout-fixed-height i-amphtml-layout-size-defined i-amphtml-layout" aria-live="polite" style="height: 50px;">
  <template type="amp-mustache">
    <p class="price"> - </p>
  </template>
<div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list"></div></amp-list>

JSON 响应包含所有正确的 AMP 标头，我在控制台中没有收到任何 AMP 错误。

我还关注了页面源中的 src 链接，它转到了正确的 URL。

我缺少一些简单的东西吗？

Answer 1

我遇到了同样的问题，我几乎尝试了所有方法。 safari 10 中的 amp-list 不加载 json 端点。

但我的解决方案是将credentials="include" 添加到我的amp-list 标签中：

最后的amp-list：

<amp-list credentials="include" id="smallcartsList" width="auto" height="@HeightRequest" [height]="CurrentCartList.items.length == 0 ? 5 : 50 * CurrentCartList.items.length" media="(max-width: 1199px)" layout="fixed-height" binding="no" src="/API/CartList/GetCartsList" [src]="cartlistsource" template="cartlistdetail"> </amp-list>

Answer 2

Sebastian Benz 是正确的，我使用了相同的代码并且工作正常

Here is working url

HEAD JS

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

正文 HTML

<amp-list width="auto"
  height="50"
  layout="fixed-height"
  src="https://jsonblob.com/api/jsonBlob/1f6f838d-25aa-11e8-8863-d99090d9ec78">
  <template type="amp-mustache">
    <p class="price align-center {{test}}">{{price}}</p>
  </template>
</amp-list>

JSON DATA LINK