Question

我创建了一个amp-mustache模板，如下所示。

<template type="amp-mustache" id="amp-template-id">
    <div>
        <span>{{date}}</span>
        <span>{{prev}}</span>
        <span>{{open}}</span>
        <span>{{low}}</span>
        <span>{{high}}</span>
        <span>{{last}}</span>
        <span>{{vol}}</span>
    </div>
</template>

此模板嵌套在amp-list中。 amp-list的源网址（https和跨域）正在JSON下发送。

{ “ date”：“ 2018-08-03 14:40:09”， “上一个”：37165.16， “开放”：37327.16， “低”：37319.61， “最高”：37567.47， “最后”：37557.93， “ vol”：0 }

在加载页面时，我什么都看不到。在DOM中，我只能看到这个空的div。

<div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list"></div>

我遵循了此link中提到的示例。我还尝试将span标签之间的变量替换为“ date”，$ {{date}}，“ prev”，$ {{prev}}，但没有任何效果。在这方面的任何帮助将不胜感激。

编辑：添加代码的放大器列表部分

   <amp-list src="https://api.myjson.com/bins/133uw8" width="auto" height="auto" layout="responsive"> 
      <template type="amp-mustache" id="amp-template-id2">
           {{date}}----{{prev}}----{{open}}----{{low}}----{{high}}----{{last}}----{{vol}}
      </template>    
    </amp-list>

Answer 1

对我来说最重要的是您的布局类型和放大器清单的尺寸。我实际上只是将它们放到我正在处理的东西中，却收到一条错误消息，提示auto对高度值无效。这可能就是为什么没有渲染的原因。类型自适应类型需要宽度和高度，然后在缩放时会限制比例。

对于放大器清单，您可能更适合使用固定高度或弹性项目的布局类型。如果您使用其中任何一种，都可以不定义宽度，然后只需要指定一个确切的高度即可。

如果您需要您的放大器清单具有一定的动态高度，请查看this thread中塞巴斯蒂安·奔驰的答案。

Answer 2

问题在这里width="auto" height="auto" layout="responsive"

响应式布局需要宽度和高度，因为Element的大小应为其容器元素的宽度，并自动将其高度调整为width和height属性所给定的纵横比。

此处提供有关哪种布局使用宽度和高度Click Here

的更多信息

amp-list支持的布局是：填充，固定，固定高度，弹性项目，不显示，响应式

Json应该是这样的：Click Here

{
 "items": [
   { "date": "2018-08-03 14:40:09", "prev": 37165.16, "open": 37327.16, "low": 37319.61, "high": 37567.47, "last": 37557.93, "vol": 0 }
 ]
}

Here is the working Url

<!--
  ## Introduction

  The [`amp-list`](https://www.ampproject.org/docs/reference/components/amp-list) component fetches dynamic content from a CORS JSON endpoint and renders it using a supplied template. This is good for embedding a dynamic list of related articles.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>amp-list</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- ## Setup -->
  <!-- Import the `amp-list` component ... -->
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <!-- ... and the `amp-mustache` component in the header -->
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
  <link rel="canonical" href="https://ampbyexample.com/components/amp-list/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<amp-list src="https://api.myjson.com/bins/133uw8" width="300" height="500" layout="responsive"> 
      <template type="amp-mustache" id="amp-template-id2">
           {{date}}----{{prev}}----{{open}}----{{low}}----{{high}}----{{last}}----{{vol}}
      </template>    
    </amp-list> 
</body>
</html>

amp-mustache模板未呈现

2 个答案: