Amphtml: amp-mustache falsy conditional blocks are displayed in email

Created on 13 Jan 2020 · 7Comments · Source: ampproject/amphtml

Mustache documentation says that the zero values 0 will be treated as false and the corresponding block will not be shown. But it appears in the amp email. While i checked in playground.amp.dev, the block is hidden as expected. Please have a look into this.

Steps to reproduce:

Have a sample template and add a variable with value zero (0) [preferably fetch that variable's value from API call within the AMP-List] and you will find that the block is displayed even though it shouldn't as the value is considered to be false value as per mustache.

Checked on -> Google Chrome (Version 79.0.3945.117 (Official Build) (64-bit))

AMP Version affected -> 1911191835190

Please look into this ASAP. Can help with any further queries. Thanks

amp-list Soon Bug amp4email components

Source

modernwarfareuplink

All 7 comments

Thanks for filing this issue! I was able to reproduce with the following sample:

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  <amp-list src="https://amp.dev/static/samples/json/todo.json" layout="fixed-height" height="80">
    <template type="amp-mustache">
      <div id="cart">
        {{#id}}
        <div class="cart-item">
            <span>{{title}}</span>
            <span>{{id}}</span>
          </div>
        {{/id}}
      </div>
    </template>
  </amp-list>
</body>
</html>

In the email playground, the following is displayed:
Defrost the fridge 1
Breathe 2

whereas in the sent email (tested in Gmail client) displays the following:
Book the hairdresser appointment 0
Defrost the fridge 1
Breathe 2

Can you tell me more about the email clients you are using? It would be helpful to have a better idea of how this unexpected behavior is appearing in different cases. /cc @ampproject/wg-amp4email @zhangsu

caroqliu on 13 Jan 2020

👍1

Could you point us to the documentation that says "zero values 0 will be treated as false and the corresponding block will not be shown"? I couldn't find this behavior documented in https://mustache.github.io/mustache.5.html, nor https://amp.dev/documentation/components/amp-mustache.

The official Mustache documentation only says:

If the person key exists and has a value of false or an empty list, the HTML between the pound and slash will not be displayed.

Here it mentions specifically the value of false (and empty list), not falsy or falsey values as defined in JavaScript. Without further evidence, I tend to think that this is an implementation detail of the Mustache engine being used for which you should not rely on. The JavaScript Mustache library doesn't evaluation the section block if it's falsy, but other implementations of Mustache may not do that as it would be non-standard behavior.

zhangsu on 14 Jan 2020

👍1

Please refer to the mustache documentation here -> https://github.com/janl/mustache.js#sections
It states that If the person key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered. Also, the above stated behaviour is available in playground.amp.dev but it is failing within the gmail client. cc @zhangsu

modernwarfareuplink on 14 Jan 2020

I have checked only in gmail web version on google chrome (79.0.3945.117) and firefox (70.0.1), I faced the same issue in both browsers. cc @caroqliu

modernwarfareuplink on 14 Jan 2020

Yeah, the documentation you linked is for the JavaScript implementation of Mustache, and the behavior it documents is non-standard and should not be relied on. Different AMP for Email clients
(Outlook, Yahoo Mail, mail.ru, Gmail, etc.) may use different Mustache implementations (e.g., Mustache Java), so you should only rely on behaviors defined in the spec. The playground (playground.amp.dev) uses the JavaScript implementation of Mustache, which is why it has this non-standard behavior.

Can you work around this by relying on the exact false and empty list values instead, as documented by the Mustache spec?

zhangsu on 15 Jan 2020

👍1

Yeah, I have updated it to use a boolean value, but it would be better to have the exact implementation in playground.amp.dev and in gmail client. Also would be better, if we could either have same functionality between them or add some information in the AMP documentation about this difference. Thanks a lot for the quick response. @zhangsu @caroqliu

modernwarfareuplink on 16 Jan 2020

Fixed by #26950.