1

我创建了一个 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 有一个源 URL（https 和跨域），它在 JSON 下方发送。

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

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

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

我按照此链接中提到的示例进行操作。我还尝试将 span 标签之间的变量替换为“date”、${{date}}、“prev”、${{prev}}，但没有任何效果。在这方面的任何帮助将不胜感激。

编辑：添加代码的 amp-list 部分

   <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>
4

2 回答 2

2

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

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

这是有关使用宽度和高度的布局的更多信息，请单击此处

amp-list支持布局为：填充、固定、固定高度、弹性项目、无显示、响应式

Json 应该是这样的：点击这里

{
 "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 }
 ]
}

这是工作网址

<!--
  ## 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 ⚡&gt;
<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>
于 2018-08-04T10:02:34.517 回答
1

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

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

如果您需要您的 amp-list 具有某种动态的高度，请在此线程中查看 Sebastian Benz 的答案。

于 2018-08-03T12:48:11.847 回答