首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >安培列表没有显示任何东西

安培列表没有显示任何东西
EN

Stack Overflow用户
提问于 2015-12-30 19:44:17
回答 2查看 2.3K关注 0票数 4

我正在尝试实现安培列表组件。我已经上传了一个json文件,该文件可以在amazon上公开使用,因为内容将通过https协议提供。我使用了来自doc (https://github.com/ampproject/amphtml/blob/da89bab7c3401f4200d4c58166d5ca062f77e0c0/extensions/amp-list/amp-list.md)的示例文件,并稍微修改了它:

代码语言:javascript
复制
<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>

验证器说:"AMP验证成功“,但列表中没有显示任何内容。

我还试图通过在amp-list标记的模板属性中引用它的id来指定模板,如文档化(模板属性,引用现有模板元素的ID )中所解释的那样:

代码语言:javascript
复制
<!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>

List仍然什么也没有显示,他返回验证器:"DISALLOWED_ATTR模板“。似乎在安培列表标签上不允许有模板属性.

也许我没有正确理解这些文件..。

任何帮助使它发挥作用将是非常感谢的。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-06 17:16:48

你好,艾德,谢谢你的精确要求。我终于成功了。需要做的事情:

  • 正如您所说:导入放大器列表js。据我所知,每个AMP扩展组件都需要添加自己的js才能工作,对吗?
  • 正如你也说过的:通过实验支持安培胡子。您提供的页面仅在cdn.ampproject.org域中启用未发布的组件。为了在我自己的域上启用amp-胡子,我必须在浏览器的控制台中运行AMP.toggleExperiment(“胡子”),如文档:https://github.com/ampproject/amphtml/blob/abf3282cd5670bdf9d2062d5915de97140aee97b/tools/experiments/README.md中所说的那样。
  • 由于一个未知的原因,我还不得不在amp-list标记上添加一个credentials="include“属性,以便它在火狐中工作。
票数 0
EN

Stack Overflow用户

发布于 2015-12-31 14:31:50

放大器列表需要一个"src“,这是一个CORS的URL。

您的S3桶当前只提供以下标头:

代码语言:javascript
复制
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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34536153

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档