amp-mustache template not rendering

Question

amp-mustache template not rendering

2k Views Asked by pythoniesta At 20 October 2024 at 21:02

I have created an amp-mustache template as shown below.

<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>

This template in nested inside amp-list. amp-list has a source url (https and cross-origin) which is sending below 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 }

On loading the page I cannot see anything. In DOM I can only see this empty div.

<div class="i-amphtml-fill-content i-amphtml-replaced-content" role="list"></div>

I followed the example mentioned in this link. I also tried replacing variables in between span tag as "date", ${{date}}, "prev", ${{prev}} but nothing worked. Any help in this regard will be highly appreciated.

EDIT: Adding the amp-list portion of the code

   <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>

Original Q&A

There are 2 best solutions below

**Bachcha Singh** · Answer 1

Issue is here width="auto" height="auto" layout="responsive"

Responsive Layout need width and height because Element sized to the width of its container element and resizes its height automatically to the aspect ratio given by width and height attributes.

Here is more information about which layout use width and height Click Here

amp-list Support layout is : fill, fixed, fixed-height, flex-item, nodisplay, responsive

Json Should be like this : Click Here

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

Here is the working 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>

**Craig Scott** · Answer 2

The big thing that stands out to me is your layout type and dimensions of your amp-list. I actually just put them into something I was working on and I get an error saying auto is invalid for the height value. This may be why nothing is rendering. Type responsive expects both a width and height and then it will constrain proportions when scaling.

For an amp-list you might be better suited to use a layout type of fixed-height or flex-item. If you use either you can leave your width undefined and then you just need to specify an exact height.

If you need your amp-list to have a somewhat dynamic height, check out the answer from Sebastian Benz in this thread.

amp-mustache template not rendering

There are 2 best solutions below

Related Questions in AMP-HTML

Related Questions in AMP-LIST

Related Questions in AMP-MUSTACHE

Trending Questions

Popular # Hahtags

Popular Questions