Amp html AMP-EMAIL：迭代AMP状态中的项目列表_Amp Html_Amp Email

Amp html AMP-EMAIL：迭代AMP状态中的项目列表

amp-html

Amp html AMP-EMAIL：迭代AMP状态中的项目列表,amp-html,amp-email,Amp Html,Amp Email,我正试图找到一种方法来迭代存储在amp state中amp email设置中的数据。这个问题源于这样一个事实：我希望我的服务器根据用户的输入（在本例中是zipcode）向用户返回不同的数据。由于我不能在amp电子邮件中使用amp-bind的src上的amp-bind功能，我不确定如何实现这一点下面是我的代码的人为示例： <!DOCTYPE html> <html ⚡4email> <head> ... </head> <

我正试图找到一种方法来迭代存储在

amp state

中

amp email

设置中的数据。这个问题源于这样一个事实：我希望我的服务器根据用户的输入（在本例中是zipcode）向用户返回不同的数据。由于我不能在

amp电子邮件中使用amp-bind
的src
上的amp-bind
功能，我不确定如何实现这一点
下面是我的代码的人为示例：
<!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>


...
{}
提交
不可能以这种方式迭代AMP状态
您有两个选择：
选择1
使用胡子模板代替。您可以在amp表单
中执行此操作，方法是在具有submit success
属性的元素中放置一个小胡子模板（有关详细信息，请参阅amp表单
文档部分）：
谢谢你的回复。在最终看到这一点之前，我确实选择了选项1，虽然这不是我的想法，但我正在努力克服电子邮件中无法访问AMP状态所带来的限制。
<!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>

<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>