amp-html - 在行动 xhr 中传递 AMP 状态
问题描述
我正在研究 amp-form。在 action-xhr 中,我必须通过 url 传递一个 amp 状态。
LeadProfileId 是放大器状态。
<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>
我尝试了以下方法,但它不起作用。
- '@currentHostUrl/api/stocks/{{leadProfileId}}/negotiate'
- "'@currentHostUrl/api/stocks/'leadProfileId'/negotiate'"
解决方案
Jay Gray正确地询问了您在哪里有amp-state标签?目前尚不清楚您在哪里写入数据AMP.setState({ anyData: 'anyValue'})
不幸的是,我不知道如何从 amp-state 绑定 action-xhr 属性。请参阅此主题: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>
代码笔: https ://codepen.io/alexandr-kazakov/pen/LYNWYzY ?editors=1000
推荐阅读
- css - 使用Angular动态生成具有固定宽度列的表格
- c# - Adding newline to byte sequence when writing to filestream
- c# - LINQ: latest sum of data within data range
- javascript - UIslider buttons doesn't work with checkbox filter
- sql - SubCount Divided By Total Count
- reactjs - add additional style if iPhoneX
- javascript - 试图创建一个按列过滤的表。为什么我的 js 不工作?
- javascript - 如何使用带有附加元素的angularJS
- xcode - 在 React Native 中访问 XCode 中设置的环境变量
- mysql - laravel 5.5中mysql的关系