Question

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

小胡子少了一点逻辑（如果不是，则支持基本），即提到的here。他们还建议对这种复杂的条件逻辑使用Handlebar JS，但看起来我们这里没有任何AMP替代品。

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

Answer 1

对于更复杂的用例，可以组合amp-bind和amp-list。诀窍是：将绑定作为amp-list呈现的一部分进行评估。这意味着您可以将amp-bind的表现力与胡须模板逻辑一起使用：

  <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

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

1 个答案: