选项1

Question

我正在尝试找到一种方法来遍历amp-state设置中存储在amp-email中的数据。此问题源于以下事实：我希望我的服务器根据用户的输入（在这种情况下为邮政编码）将不同的数据返回给用户。由于我无法在amp-bind的{{1}}的{{1}}的{{1}}上使用src的功能，因此我不确定该如何实现。

下面是我的代码的示例：

amp-list

Answer 1

不可能以这种方式迭代AMP状态。

您有两个选择：

选项1

改用胡子模板。您可以在amp-form内执行此操作，方法是将胡子模板放在具有submit-success属性的元素中（有关更多信息，请参见amp-form文档的Success/error response rendering部分）：< / p>

<!DOCTYPE html>
<html ⚡4email>
  <head>
    ...
  </head>

  <body>
    <amp-state id="state">
      <script type="application/json">
        {}
      </script>
    </amp-state>

    <div class="container">
      <!-- STEP 1 -->
      <div class="step" id="step1">
        <form
          id="form1"
          method="POST"
          action-xhr="https://localhost:3333/getDataFromZip"
          on="submit-success:
              AMP.setState({
                  page: 'step2'
              })"
        >
          <div [hidden]="page != 'home'">
            <input type="text" name="zip" />
            <button type="submit">
              Submit
            </button>
          </div>

          <!-- STEP 2 -->
          <div submit-success >
            <template type="amp-mustache">
              <div class="step" id="step2" [hidden]="page != 'step2'">
                {{#data}}
                <!-- add template for each item here -->
                {{/data}}
              </div>
            </template>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

选项2

如果amp-state中的数组中的项目数量很少，则可以对数组访问进行硬编码。例如，如果您希望每个数组项都使用<p>标签：

<amp-state id="state">
  <script type="application/json">
    {
      items: ['a', 'b', 'c']
    }
  </script>
</amp-state>

<p [hidden]="!state.items[0]" [text]="state.items[0]"></p>
<p [hidden]="!state.items[1]" [text]="state.items[1]"></p>
<p [hidden]="!state.items[2]" [text]="state.items[2]"></p>
<p [hidden]="!state.items[3]" [text]="state.items[3]"></p>
<p [hidden]="!state.items[4]" [text]="state.items[4]"></p>

AMP-EMAIL：从amp-state迭代项目列表

1 个答案:

选项1

选项2