amp-mustache模板不渲染
我已经创建了一个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下面发送。
{ "date"："2018-08-03 14:40:09"，"prev"：37165.16，"open"：37327.16，"low"：37319.61，"high"：37567.47，"last"：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部分
<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> 回答 2
Stack Overflow用户
发布于 2018-08-04 18:02:35
问题在这里width="auto" height="auto" layout="responsive"
响应式布局需要宽度和高度，因为元素的大小调整为其容器元素的宽度，并自动将其高度调整为宽度和高度属性所给出的纵横比。
以下是有关使用宽度和高度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 }
]
}<!--
## 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>Stack Overflow用户
发布于 2018-08-03 20:48:12
对我来说最重要的事情是你的布局类型和放大列表的尺寸。实际上，我只是把它们放到我正在处理的东西中，我得到了一个错误，说auto对于高度值无效。这可能就是什么都没有渲染的原因。类型响应式需要宽度和高度，然后它将在缩放时约束比例。
对于amp-list，您可能更适合使用固定高度或可变项目的布局类型。如果你使用任何一个，你可以不定义你的宽度，然后你只需要指定一个确切的高度。
如果你需要你的amp列表有一些动态的高度，看看Sebastian Benz在this thread中的答案。
https://stackoverflow.com/questions/51669781
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号