1

我正在尝试找到一种方法来迭代存储在设置中的amp-state数据amp-email。这个问题源于我希望我的服务器根据用户的输入（在这种情况下为邮政编码）向用户返回不同的数据。由于我不能在 in的ofamp-bind上使用 ' 的功能，我不确定如何实现这一点。srcamp-listamp-email

下面是我的代码的人为示例：

<!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" [hidden]="page != 'home'">
        <form
          id="form1"
          method="POST"
          action-xhr="https://localhost:3333/getDataFromZip"
          on="submit-success:
              AMP.setState({
                  page: 'step2',
                  returnedData: event.response.data,
              })"
        >
          <input type="text" name="zip" />
          <button type="submit">
            Submit
          </button>
        </form>
      </div>
      <!-- STEP 2 -->
      <div class="step" id="step2" [hidden]="page != 'step2'">
        <!-- ITERATE OVER state.returnedData HERE -->

      </div>
    </div>
  </body>
</html>
4

1 回答 1

1

无法以这种方式迭代 AMP 状态。

你有两个选择：

选项1

改用小胡子模板。您可以amp-form通过将 mustache 模板放在具有该submit-success属性的元素中来执行此操作（有关更多信息，请参阅文档的成功/错误响应呈现部分amp-form）：

<!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>
于 2019-11-19T23:31:34.397 回答