Блог

Главная - Вопросы по программированию - Передать состояние усилителя в действии xhr

Передать состояние усилителя в действии xhr

#amp-html

#amp-html

Вопрос:

я работаю над amp-формой. в action-xhr я должен передать состояние amp с URL.

leadProfileId — это состояние amp.

 <form method="post" action-xhr='@currentHostUrl/api/stocks/leadProfileId/negotiate' id="submitOfferForm" target="_top"
                  on="submit-success: AMP.setState({ selectedOffer : null })">
                <input hidden name="priceOffered" [value]="selectedOffer">
                <input hidden name="mobileNumber" [value]="mobileNo">
            </form>

я пробовал следующие подходы, но это не работает.

  1. ‘@currentHostUrl/api/stocks/{{leadProfileId}}/согласовать’
  2. «‘@currentHostUrl/api/stocks/’leadProfileId’/согласовать'»

Комментарии:

1. где amp-state ? у вас есть действие, но нет состояния.

2. leadProfileId — это состояние amp.

Ответ №1:

Джей Грей правильно спросил вас о том, где у вас находится тег amp-state? Неясно, куда вы записываете данные, используя AMP.setState({ anyData: 'anyValue'})

К сожалению, я не знаю, как привязать атрибут action-xhr к amp-state. Смотрите этот раздел: https://github.com/ampproject/amphtml/issues/11222

Когда мы не знаем, как привязать что-либо в AMP, нам обычно помогает компонент amp-list. Решение:

 <!--
     This is the minimum valid AMP HTML document. Type away
     here and the AMP Validator will re-check your document on the fly.
-->
<!DOCTYPE html>
<html ⚡>

<head>
  <meta charset="utf-8" />
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1" />
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both;
    }
    
    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden;
      }
      to {
        visibility: visible;
      }
    }
    
    @-moz-keyframes -amp-start {
      from {
        visibility: hidden;
      }
      to {
        visibility: visible;
      }
    }
    
    @-ms-keyframes -amp-start {
      from {
        visibility: hidden;
      }
      to {
        visibility: visible;
      }
    }
    
    @-o-keyframes -amp-start {
      from {
        visibility: hidden;
      }
      to {
        visibility: visible;
      }
    }
    
    @keyframes -amp-start {
      from {
        visibility: hidden;
      }
      to {
        visibility: visible;
      }
    }
  </style>
  <noscript>
    <style amp-boilerplate>
      body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none;
      }
    </style>
  </noscript>
  <script async src="https://cdn.ampproject.org/v0.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-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
</head>

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

  <h2>AMP-Form</h2>

  <amp-list width="auto" height="100" items="." src="amp-state:localState" single-item>
    <template type="amp-mustache">

      <form method="post" target="_top" action-xhr="https://amp.dev/documentation/examples/{{leadProfileId}}/verify-form-input-text-xhr/">
        <button type="submit">Submit</button>
        <div submit-success>Form send successful!</div>
        <div submit-error>Form send failed!</div>
      </form>

    </template>
  </amp-list>

</body>

</html>

Codepen: https://codepen.io/alexandr-kazakov/pen/LYNWYzY?editors=1000