Amp html amp胡须模板未渲染_Amp Html_Amp List_Amp Mustache

Amp html amp胡须模板未渲染

amp-html

Amp html amp胡须模板未渲染,amp-html,amp-list,amp-mustache,Amp Html,Amp List,Amp Mustache,我已经创建了一个amp胡须模板，如下所示 <template type="amp-mustache" id="amp-template-id"> <div> <span>{{date}}</span> <span>{{prev}}</span> <span>{{open}}</span> <span>{{low}}&l

我已经创建了一个amp胡须模板，如下所示

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


{{date}}
{{prev}}
{{open}}
{{low}}
{{high}}
{{last}}
{{vol}}

此模板嵌套在amp列表中。amp列表有一个源url（https和跨源），它在JSON下面发送

{ “日期”：“2018-08-03 14:40:09”， “prev”：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列表部分

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


{date}--{prev}--{{open}--{{low}--{high}--{last}--{vol}

对我来说最突出的是您的布局类型和放大器列表的尺寸。实际上，我只是把它们放进了我正在研究的东西中，我得到一个错误，说auto对于height值无效。这可能就是为什么没有渲染。类型响应需要宽度和高度，然后在缩放时将约束比例

对于amp列表，您可能更适合使用固定高度或弹性项的布局类型。如果使用其中一种方法，则可以不定义宽度，然后只需指定确切的高度

如果你需要你的放大器列表有一个动态的高度，看看答案从塞巴斯蒂安奔驰在

问题就在这里

width=“auto”height=“auto”layout=“responsible”

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

下面是关于哪个布局使用宽度和高度的更多信息

放大器列表

支架布局为：填充、固定、固定高度、弹性项目、节点显示、响应

Json应该是这样的：


安培表
body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏}
{date}--{prev}--{{open}--{{low}--{high}--{last}--{vol}

您是否将JSON数组包装在“items”中？（即，{“items”：[{YOUR DATA HERE}]}）。您能否将代码的amp-list部分添加到您的帖子中？@craigscott-即使在将JSON数组包装在“items”中，我无法呈现模板。请提供建议。根据我们的经验，

固定高度

效果最好。我们使用

flex item获得不规则结果

。@bachcha下面显示了一个很好的解决方案，但他使用单行布局避免了高度问题。

{
 "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 ⚡>
<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>