amp-list doesn't show anything

Question

I'm trying to implement the amp-list component. I've uploaded a json file publicly available on amazon S3 bucket since the content is to be served via https protocol. I've used the example file from the doc (https://github.com/ampproject/amphtml/blob/da89bab7c3401f4200d4c58166d5ca062f77e0c0/extensions/amp-list/amp-list.md) and modified it slightly :

<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 says : "AMP validation successful", but nothing is shown in the list.

I've also tried to specifie the template by referencing it's id in an template attribute of amp-list tag as explained in the documnentation (template attribute that references an ID of an existing template element) :

<!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 still shows nothing and he validator returns : "DISALLOWED_ATTR template". It seems template attribute is not allowed on amp-list tag...

Maybe I've not correctly understood the documentation...

Any help to make it work would be greatly appreciated.

ade ade · Accepted Answer · 2015-12-31T14:31:50

amp-list requires a "src" that is a CORS URL.

Your S3 bucket currently only provides the following headers:

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

You need to enable CORS support on your S3 bucket by following the instructions provided here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

amp-list doesn't show anything

2 Answers