Я пытаюсь реализовать компонент amp-list. Я загрузил файл json, общедоступный в ведре amazon S3, так как контент должен обслуживаться по протоколу https. Я использовал пример файла из документа (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>

Валидатор сообщает: «Проверка AMP прошла успешно», но в списке ничего не отображается.

Я также попытался указать шаблон, сославшись на его идентификатор в атрибуте шаблона тега amp-list, как описано в документации (атрибут шаблона, который ссылается на идентификатор существующего элемента шаблона):

<!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 template». Кажется, атрибут шаблона не разрешен в теге amp-list ...

Может я не правильно понял документацию ...

Любая помощь, чтобы заставить его работать, будет принята с благодарностью.

4
Kap 30 Дек 2015 в 22:44

2 ответа

Лучший ответ

Привет, Адэ, и спасибо за эти уточнения. Наконец-то мне удалось заставить его работать. Что нужно было сделать:

0
Kap 6 Янв 2016 в 17:16