Advanced Server Request
Introduction
This sample demonstrates how to display data from a server in an email and refresh it subsequently while taking the user's input into account.
Because AMP for Email doesn't allow binding to [src] in amp-list, it uses a combination of
amp-list and amp-form
that share the same amp-mustache template.
When the form is submitted for the first time, the amp-list is hidden and the form's response takes its place.
Implementation
Define a template and give it an id to allow it to be used from both amp-list and amp-form.
This displays data sent from a server.
{{#animal}}You have selected {{animal}}.
{{/animal}}<template id="animal-template" type="amp-mustache"> <p>This displays data sent from a server.</p> {{#animal}} <p>You have selected {{animal}}.</p> {{/animal}} </template>
When the user changes the selection, the change event triggers the form submission and hides the amp-list: on="change:animal-form.submit,animal-list.hide".
The amp-form renders the server response using the same template as amp-list, making the switch from amp-list to amp-form appear seamless.
<form id="animal-form" method="get" action-xhr="https://amp.dev/documentation/examples/api/echo"> <div> <p>Select an animal to update the server response.</p> <select name="animal" on="change:animal-form.submit,animal-list.hide"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="parrot">Parrot</option> </select> </div> <div submitting>Loading ...</div> <div submit-success template="animal-template"></div> </form> <amp-list id="animal-list" items="." single-item template="animal-template" src="https://amp.dev/documentation/examples/api/echo" layout="fixed-height" height="50"> <div placeholder>Loading ...</div> </amp-list>
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-