Error trying to implement amp-mustache

Question

I am trying to replicate this example with no success. I want to add a list using a mustache template, like this:

<ul>
    <amp-list width=auto
              height=100
              layout=fixed-height
              src="/assets/popular.json">
          <template type="amp-mustache"
                    id="amp-template-id">
              <li>
                  <a href={{url}}>{{title}}</a>
              </li>
          </template>
    </amp-list>
</ul>

My /assets/popular.json file is:

{
 "items": [
   {
     "title": "amp-carousel",
     "url": "https://ampbyexample.com/components/amp-carousel"
   },
   {
     "title": "amp-img",
     "url": "https://ampbyexample.com/components/amp-img"
   },
   {
     "title": "amp-ad",
     "url": "https://ampbyexample.com/components/amp-ad"
   },
   {
     "title": "amp-accordion",
     "url": "https://ampbyexample.com/components/amp-accordion"
   }
 ]
}

But I cannot get it to work, the values in the json are not being replaced in the template, I get this error:

Missing URL for attribute 'href' in tag 'a'

I do not know why the value {{url}} is not being replaced properly with the content of the json.

I've added the necessary scripts in the head.

I think your json file is not loaded correctly, please check in the network tab to see if you are getting the file. — Shlomi Haver, Jul 30 '16 at 09:09
@ShlomiHaver You can check it live here: https://elbauldelprogramador.com/tags/ The amp-list shoud appear at the beggining (Currently there is a blank space due to the error) — Alejandro Alcalde, Jul 30 '16 at 10:00
I would like to see the error you are getting in a fiddle so i could try and help you. — Shlomi Haver, Jul 30 '16 at 11:24

score 8 · Accepted Answer · edited Sep 12 '20 at 09:07

Recently I've been migrating to Hugo from Jekyll and have faced the same issue. Below are solutions for both.

Jekyll

It is solved now, the problem was I am using jekyll, and so the tags {{tag}} were being interpreted as a liquid tag. I solved it writing the code like this:

<ul>
<amp-list width=auto
    height=100
    layout=fixed-height
    src="/assets/popular.json">
  <template type="amp-mustache"
      id="amp-template-id">
    <li>
      <a href="{% raw %}{{url}}{% endraw %}">{% raw %}{{title}}{% endraw %}</a>
    </li>
  </template>
</amp-list>
</ul>

Update: I have written a more detailed explanation

Hugo

<ul>
<amp-list width=auto
    height=100
    layout=fixed-height
    src="/assets/popular.json">
  <template type="amp-mustache"
      id="amp-template-id">
    <li>
      <a class="card related" id={{"{{id}}"}} {{ printf "href=%q" "{{url}}" | safeHTMLAttr }}>
         {{"{{title}}"}}
      </a>
    </li>
  </template>
</amp-list>
</ul>

Error trying to implement amp-mustache

1 Answers1

Jekyll

Hugo