AMP：如何在 AMP 中处理复杂的条件逻辑？答案

【问题标题】：AMP: How to handle complex conditional logic in AMP?AMP：如何在 AMP 中处理复杂的条件逻辑？
【发布时间】：2018-08-27 07:27:45
【问题描述】：

我们想在我们的 AMP 页面上插入一些有条件的动态内容。我们正在使用 mustache 来添加动态内容。

Mustache 逻辑较少（支持基本 if else），即提到 here。他们还建议将 Handlebar JS 用于如此复杂的条件逻辑，但看起来我们这里没有任何 AMP 替代方案。

一种解决方法是 - 从服务器发送简单的布尔值以避免客户端的所有 AND/OR 条件，但如果我们采用这种方法，我们将不得不发送太多此类变量。在 AMP 中我们应该如何处理如此复杂的情况？

【问题讨论】：

你能举个例子说明你想完成什么吗？
我们有根据用户选择的城市显示汽车价格、优惠等的网页。现在，如果我们有用户的 cookie，并且用户通过 AMP 重新进入网站，我们希望根据用户的 cookie 显示价格、优惠。问题是在 UI 端显示价格、报价的逻辑有多个 if、else if（以及 OR、AND）。如果我们在当前 UI 逻辑中有类似 (A && B) 的条件，我们将不得不将其重写为 (A) 的逻辑，然后是 (B) 的逻辑。

标签： mustache amp-html amp-mustache

【解决方案1】：

对于更复杂的用例，您可以结合使用 amp-bind 和 amp-list。诀窍是：绑定被评估为 amp-list 渲染的一部分。这意味着您可以将 amp-bind 的表现力与 mustache 模板逻辑结合使用：

  <amp-state src="amp-list-state.json" credentials=include id=state></amp-state>
  <amp-list  src="amp-list-state.json" credentials=include height="560" layout="fixed-height"   >
     <template type="amp-mustache">
       <li>{{.}}
          <div [hidden]="state.user.likesPickups">
            Convertibles ...
         </div>
         <div [hidden]="!state.user.likesPickups && state.user.age < 30">
            Pickups  ...
         </div>
       </li>
    </template>    
  </amp-list>

注意：最好对 amp-state 和 amp-list 使用相同的 JSON 端点。这可确保在页面加载期间仅发出一个请求。

示例链接：https://amp-demos.glitch.me/amp-list-state.html

【讨论】：

您分享的链接只是给出了输出。输入将来自 host/amp-list-state.json 但代码在哪里。根据您的代码，它应该在您打印 Pickups 时显示其他内容......仅当用户的年龄为 30 岁时
该示例没有文档版本，您可以查看源代码以了解它是否正常工作（没有服务器端逻辑）。如果用户不喜欢接送并且年龄小于 30，我将使用 hidden 属性隐藏元素。
谢谢。它正在工作。希望这种隐藏变量不会对seo或其他类型的影响。