Шаблон amp-усы не рендеринг

Я создал шаблон с усами, как показано ниже.

<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 и cross-origin), который отправляется ниже 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>

Я следовал примеру, упомянутому в этой ссылке. Я также пытался заменить переменные между тегами 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 ответа

Проблема здесь width="auto" height="auto" layout="responsive"

Адаптивный макет требует ширины и высоты, потому что размер элемента соответствует ширине его элемента контейнера и автоматически изменяет его высоту до соотношения сторон, заданного атрибутами ширины и высоты.

Вот больше информации о том, какой макет использовать ширину и высоту Нажмите здесь

amp-list Компоновка поддержки: заполнение, фиксированная, фиксированная высота, flex-item, nodisplay, отзывчивый

Json должен быть таким: Нажмите здесь

{
 "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 }
 ]
}

Вот рабочий URL

<!--
  ## 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>
Источник

Главное, что выделяет меня, это ваш тип макета и размеры вашего списка усилителей. На самом деле я просто помещаю их во что-то, над чем я работал, и получаю сообщение об ошибке, говоря, что auto недопустимо для значения высоты. Это может быть, почему ничего не рендерится. Адаптивный тип ожидает ширину и высоту, и тогда он будет ограничивать пропорции при масштабировании.

Для списка усилителей может быть лучше использовать тип макета с фиксированной высотой или flex-item. Если вы используете любой из них, вы можете оставить свою ширину неопределенной, а затем вам просто нужно указать точную высоту.

Если вам нужен ваш динамический список, чтобы иметь несколько динамический рост, посмотрите ответ Себастьяна Бенца в этой теме.

Источник
Другие вопросы по тегам