我正在尝试实现amp-list组件。我上传了一个在亚马逊S3桶上公开的json文件,因为内容是通过https协议提供的。我已经使用了doc(https://github.com/ampproject/amphtml/blob/da89bab7c3401f4200d4c58166d5ca062f77e0c0/extensions/amp-list/amp-list.md)中的示例文件并稍作修改:
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-list examples</title>
<link rel="canonical" href="$SOME_URL" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
<h2> ******* LIST *******</h2>
<amp-list width=300 height=200 src="https://s3-eu-west-1.amazonaws.com/gerswap/test.json">
<template type="amp-mustache">
<div>
<p>text : {{text}}</p>
<p>url : {{url}}</p>
</div>
</template>
</amp-list>
</body>
</html>
Validator说:“AMP验证成功”,但列表中没有显示任何内容。
我还尝试通过在amp-list标签的模板属性中引用它的id来指定模板,如documnentation(引用现有模板元素的ID的模板属性)中所述:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-list examples</title>
<link rel="canonical" href="$SOME_URL" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
<h2> ******* LIST *******</h2>
<amp-list template="list" width=300 height=200 src="https://s3-eu-west-1.amazonaws.com/gerswap/test.json">
</amp-list>
<template id="list" type="amp-mustache">
<div>
<p>text : {{text}}</p>
<p>url : {{url}}</p>
</div>
</template>
</body>
</html>
列表仍然没有显示任何内容,并且验证器返回:“DISALLOWED_ATTR模板”。在amp-list标签上似乎不允许使用模板属性...
也许我没有正确理解文档......
非常感谢任何使其成功的帮助。
答案 0 :(得分:3)
amp-list需要一个&#34; src&#34;这是一个CORS URL。
您的S3存储桶目前仅提供以下标题:
HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Length: 181
Content-Type: application/octet-stream
Date: Thu, 31 Dec 2015 14:27:34 GMT
ETag: "683081003e1e42bfafcc054540ea60b4"
Last-Modified: Wed, 30 Dec 2015 17:34:34 GMT
Server: AmazonS3
x-amz-id-2: 9/ibtmhzmIdpIA/mjBlZbqDW4BcFYfgH6q52/MCOvMPR0mu9cPCT7acJkiRwh7hcG+BEuYDoJag=
x-amz-request-id: E00AF34C00EDC261
x-amz-version-id: null
您需要按照此处提供的说明在S3存储桶上启用CORS支持:http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
答案 1 :(得分:0)
嗨Ade,感谢那些精确。我终于成功了。需要做的事情: