Currency Conversion
Introduction
This example shows how to use amp-bind to filter JSON data on select of option in select dropdown.
Setup
We include amp-bind to track the state
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> Implementation
This example uses a public currency endpoint to populate amp-state. The default value is EUR (euro) and we convert the currency values by updating amp-state when the user changes the dropdown to a different currency.
Banana
EUR 2.00
<amp-state id="currencyFilter" src="https://api.exchangeratesapi.io/latest"></amp-state> <amp-state id="defState"> <script type="application/json"> { "currencyRate": 1, "currencyDecimal": 2, "currencyCode": "EUR" } </script> </amp-state> <select on="change:AMP.setState({ defState: { currencyRate: event.value == 'EUR' ? 1 : currencyFilter.rates[event.value], currencyCode: event.value } })"> <option value="CAD">CAD</option> <option value="EUR" selected>EUR</option> <option value="HKD">HKD</option> <option value="ISK">ISK</option> <option value="USD">USD</option> <option value="GBP">GBP</option> <option value="RUB">RUB</option> <option value="INR">INR</option> </select> <h3>Banana</h3> <div> <span [text]="defState.currencyCode">EUR</span> <span [text]="(2*defState.currencyRate).toFixed(defState.currencyDecimal)">2.00</span> </div> <amp-img src="https://cdn.glitch.com/cbcdd9ba-70f9-4d53-a19d-486e4b70f73f%2F440px-Cavendish_Banana_DS.jpg?v=1578089065672" height="112" width="112" layout="fixed" title="banana"></amp-img> さらに説明が必要ですか？
このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。
Stack Overflow にアクセスする 説明されていない機能ですか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-