1

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

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

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

4

1 回答 1

3

对于更复杂的用例，您可以结合使用 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

于 2018-08-27T15:29:48.067 回答