用于电子邮件的 AMP:如何在用于电子邮件的 AMP 中处理复杂的条件逻辑?

问题描述

我开发了一个代码,它使用 amp-list 从后端服务器检索 json 数据。基于来自服务器的变量之一,我想要一个 if 条件。下面提到了我希望完成的示例:

<html ⚡4email data-css-strict>
<head>
  <Meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    h1 {
      margin: 1rem;
    }
  </style>
</head>
<body>
  <amp-list template="list-template" src="https://random_server_link/get_x_value_and_y_value" layout="responsive">
    <template id="list-template" type="amp-mustache">
    {% if {{x}} == {{y}} %}
      <p>
          x == y
      </p>  
    {% elif {{x}} != {{y}} %}
      <p>
        x not equal to y
      </p>
    {% else %}
      <p>
        else condition
      </p>
{% endif %}
  </template>
  </amp-list>
  <h1>Hello,I am an AMP EMAIL!</h1>
</body>
</html>

上面的代码不起作用,我需要一个 if-else 条件的替代方法

谢谢

解决方法

为了简单的 if/else 测试 Mustache 变量的真实性,您可以使用 section 标签和倒置 section 标签,如 AMP documentationMustache documentation 中提到的。有关示例,请参阅 How do I accomplish an if/else in mustache.js?

对于比简单的真实性测试更复杂的事情(例如,两个变量之间的相等性检查),您必须将该逻辑推送到服务器端。 Mustache 不具备比较值或表达两个变量之间的任何其他二元关系的能力。它被设计成一个无逻辑的模板。在服务器端进行计算,将其转换为简单的位,您可以在客户端使用 Mustache 中的 section 标记和反转 section 标记进行检查。