Question

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

然而，放大器列表不打印数据，而是打印空白区域。 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>

BODY 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

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

2 个答案: