0

I am dynamically setting time left in amp-date-countdown:

<amp-list width="auto"
            height="620"
            layout="fixed-height"
            src="/api/offer/******">
    <template type="amp-mustache" id="amp-template-id">
        <amp-animation id="hide-timeout-event" layout="nodisplay">
            <script type="application/json">
                {
                "duration": "0.01s",
                "fill": "both",
                "selector": "#ampdate",
                "keyframes": { "visibility": "hidden"}
                }
            </script>
        </amp-animation>
        <amp-date-countdown 
        id="ampdate"
            timeleft-ms="{{{time_left}}}"
            layout="fixed-height"
            height="150"
            on="timeout: hide-timeout-event.start, show-timeout-event.start"
            when-ended="stop">

            <template type="amp-mustache">
               {{{h}}} h {{`{{{m}}} m {{{s}}} s
            </template>

        </amp-date-countdown>
    </template>
</amp-list>

the code is running absolutely fine, however it is not validating and throws two errors:

The attribute 'timeleft-ms' in tag 'amp-date-countdown' is set to '{{{time_left}}}', which contains unescaped Mustache template syntax.

The tag 'template' may not appear as a descendant of tag 'template'.

I have no idea what I am doing wrong as this runs exactly as expected.

Alex Betz
  • 11
  • 1

1 Answers1

1

To answer my own question:

Moving the template outside the amp-list and calling it via an id from the amp-date-countdown. and got rid of the first error. The second one was equally simple.amp-date-countdown has no reason to accept an unescaped parameter. A simple change from {{{***}}} to {{***}} corrects this. The following code works and validates:

<template type="amp-mustache" id="timer">
    {{{h}}} h {{`{{{m}}} m {{{s}}} s
</template>
<amp-list width="auto"
            height="620"
            layout="fixed-height"
            src="/api/offer/******">
    <template type="amp-mustache" id="amp-template-id">
        <amp-animation id="hide-timeout-event" layout="nodisplay">
            <script type="application/json">
                {
                "duration": "0.01s",
                "fill": "both",
                "selector": "#ampdate",
                "keyframes": { "visibility": "hidden"}
                }
            </script>
        </amp-animation>
        <amp-date-countdown 
        id="ampdate"
            timeleft-ms="{{time_left}}"
            layout="fixed-height"
            height="150"
            on="timeout: hide-timeout-event.start, show-timeout-event.start"
            when-ended="stop"
            template="timer">
        </amp-date-countdown>
    </template>
</amp-list>
Alex Betz
  • 11
  • 1