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

Question

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

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

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

Answer 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 端点。这确保在页面加载期间只会发出一个请求。

Link 样本：https://amp-demos.glitch.me/amp-list-state.html

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

AMP: How to handle complex conditional logic in AMP?

mustache

amp-html

amp-mustache