Autor

Alejandro Alcalde

Data Scientist and Computer Scientist. Creator of this blog.

Más artículos de Alejandro Alcalde | Porfolio

Índice

Amp-mustache da error al sustituir las etiquetas

Intentando implementar la etiqueta amp-mustache para el blog encontré muchos problemas, la idea era usar una plantilla para que fuera rellenada desde un json. El código era bastante simple:

  <amp-list
     id="popular-posts"
     width=300
     height=300
     layout=responsive
     src="/assets/popular.json">
    <template type="amp-mustache">
      <a class="card related"
         id="{% raw %}{{id}}{% endraw %}"
         href={% raw %}{{url}}{% endraw %}>
        <img width="101"
                 height="75"
                 src="{% raw %}}{% endraw %}"></img>
        <span>{% raw %}{{title}}{% endraw %}</span>
      </a>
    </template>
   </amp-list>

El problema era que por alguna razón las etiquetas {% raw %}{{url}}, {{title}}, ...{% endraw %} no eran sustituidas por los valores del json, que era el siguiente:

{
    "items": [
        {
            "title": "Qué es un NullPointerException y cómo solucionarlo",
            "thumbnail": "/img/2014/05/Qu%C3%A9-es-un-NullPointerException-y-c%C3%B3mo-solucionarlo.png",
            "id": "pop1",
            "url": "/que-es-un-nullpointerexception-y-como-solucionarlo/"
        },
        {
            "title": "Mini tutorial y chuleta de comandos para Git",
            "thumbnail": "/img/2013/03/git-logo.png",
            "id": "pop2",
            "url": "/mini-tutorial-y-chuleta-de-comandos-git/"
        },
        {
            "title": "Buenas prácticas para el Diseño de una API RESTful Pragmática",
            "thumbnail":"/img/2014/01/201305-xml-vs-json-api.png",
            "id": "pop3",
            "url": "/buenas-practicas-para-el-diseno-de-una-api-restful-pragmatica/"
        },
        {
            "title": "¿Cual es la diferencia entre los distintos formatos de audio, y cual debería elegir?",
            "thumbnail": "/img/2012/07/original1.jpg",
            "id": "pop4",
            "url": "/cual-es-la-diferencia-entre-los-distintos-formatos-de-audio-y-cual-deberia-elegir/"
        }

    ]
}

Solucionar error de amp-mustache en Jekyll

Tras pelearme una mañana entera intentando resolver el error que me mostraba la consola de AMP:

Missing URL for attribute 'src' in tag 'a'.

Me di cuenta de que el error residía en jekyll, ya que este usa etiquetas de liquid, que son iguales que las usadas en amp-mustache. Es decir, {% raw %}{{url}}{% endraw %} estaba siendo parseado por Jekyll y cuando llegaba a amp-mustache ya estaba consumido. La solución es fácil, decirle a jekyll que no interprete las etiquetas con {% raw %}{% raw %}{{ etiqueta }}{% endraw %}{{ "{% endraw " }}%}. Por tanto el código necesario es el siguiente:

<amp-list
    id="popular-posts"
    width=300
    height=300
    layout=responsive
    src="/assets/popular.json">
        <template type="amp-mustache">
            <a class="card related"
               id="{% raw %}{% raw %}{{ id }}{% endraw %}{{ "{% endraw " }}%}"
               href="{% raw %}{% raw %}{{ url }}{% endraw %}{{ "{% endraw " }}%}">
               <img width="101"
                        height="75"
                        src="{% raw %}{% raw %}{{ thumbnail }}{% endraw %}{{ "{% endraw " }}%}"></img>
                    <span>{% raw %}{% raw %}{{ title }}{% endraw %}{{ "{% endraw " }}%}</span>
            </a>
        </template>
</amp-list>

Así ya todo funciona correctamente, espero haberos ayudado.

¿Has visto algún error?: Por favor, ayúdame a corregirlo contactando conmigo o comentando abajo.

Categorías: