amp-html - AMP-LIST/AMP-BIND 动态表格

Question

这是我正在尝试做的事情:

1. 使用 google API 对邮政编码或城市和州进行地理定位。地址参数的值来自表单字段。
2. 将地理线插入同一表单中的隐藏字段
3. 提交表格。

我已经尝试使用 AMP-LIST 和 AMP-STATE 来使 google api url 正常工作。我现在遇到的两个问题是将地理线放入文本框然后提交。任何帮助将不胜感激。

这是我到目前为止写的:

<amp-list id="geoCords" [src]="'https://maps.googleapis.com/maps/api/geocode/json?address=' + searchQuery +'&key=XXX'">
<form action-xhr="/locations/index.php" class="centered" id="locationSearch" method="get" target="_top">
    <h1>AMP-Locator Demo</h1>
    <input name="brand" value="ep" type="hidden" />
    <input name="mode" value="desktop" type="hidden" />
    <input name="pagesize" value="5" type="hidden" />
    <input name="latitude" value="{{geoCords.geometry.location.lat}}"  type="hidden" />
    <input name="longitude" value="{{geoCords.geometry.location.lng}}"  type="hidden" />
    <label for="q" hidden=""><span>Zip OR City &amp; State</span></label>
    <input id="q" name="q" placeholder="Zip OR City &amp; State" type="text"/>    
    <input class="" type="submit" value="GO" on="tap:setState(searchQuery:{{q}}"/>
</form>
</amp-list>

Answer 1

你很接近。看起来你需要做的就是拿 <form>不在放大器列表中。

这是一个完整的演示(顺便说一句，是否有适用于 amp 的 jsfiddle 东西？):

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>

  <amp-state id="geoState">
      <script type="application/json">
          {
              listSrc: "https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address="
          }
      </script>
  </amp-state>

  <label for="q">Zip OR City &amp; State</label>
  <input id="q" name="q" placeholder="Zip OR City &amp; State" type="text" on="change:AMP.setState({geoState: { listSrc: 'https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address=' + event.value}})" />

  <form action-xhr="//forms/blah" target="_top" id="geoform" method="post">
      <amp-list width="auto" height="50" src="https://maps.googleapis.com/maps/api/geocode/json?key=AIzaSyA7HGfGmI5GHIsvQoLFSqf-Un6xfECk9CQ&address=" [src]="geoState.listSrc" items="results" max-items="1">
          <template type="amp-mustache">
              <input name="latitude" value="{{geometry.location.lat}}" />
              <input name="longitude" value="{{geometry.location.lng}}" />
          </template>
      </amp-list>
      <input type="submit"/>
  </form>