AMP-страницы с функцией изменения единиц измерения для веб-сайта погоды

Я ищу AMP-версию нишевого веб-сайта о погоде. В связи с погодой возникает проблема с единицами измерения - C/F, MPH/KMH и т.д.

Это не было бы проблемой, за исключением того, что у меня есть изображения и диаграммы, которые также относятся к конкретным устройствам. В версии HTML я могу легко использовать немного JS для замены единиц измерения, однако я не вижу способа сделать это на странице AMP, кроме как с помощью ссылки на другую страницу.

Итак, есть ли способ AMP сделать это, или я просто смотрю на ссылку на единицу изменения? Спасибо


amp-html
person Chris Leather    schedule 31.10.2018    source источник
comment
@можете ли вы поделиться рабочим примером в html и js   -  person Bachcha Singh    schedule 31.10.2018
comment
@BachchaSingh не уверен, что это поможет, поскольку они совершенно разные - существующая страница использует диаграммы и файлы cookie на основе JS для хранения настроек устройства. Немного покопавшись, я думаю об использовании выбора единиц измерения по географическому признаку и просто о наличии ссылки на html-сайт, если пользователь захочет измениться.   -  person Chris Leather    schedule 31.10.2018

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, вы захотите использовать комбинацию amp-bind и amp-list. Компонент amp-list позволит вам получать контент из конечной точки JSON, откуда, как я полагаю, берутся ваши данные о погоде. Затем вы можете использовать amp-bind для переключения видимого состояния диаграммы на странице в зависимости от того, какая единица измерения выбрана пользователем. Вы можете найти более подробные примеры на веб-сайте AMP, но вот краткий пример, который переключает стиль в div, когда вы нажимаете серию из двух кнопок.

Голова:

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

<amp-state id="unitMeasurement">
  <script type="application/json">
    {
      "selected": "f",
      "f": {
        "style": "showF",
      },
      "c": {
        "style": "showC",
      }
    }
  </script>
</amp-state>

Тело

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'f'}})">
  Switch F
</button>

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'c'}})">
  Switch C
</button>

<p [class]="unitMeasurement[unitMeasurement.selected].style"
  class="measurement">Units.</p>
person James Ives    schedule 31.10.2018
comment
Не использовать канал JSON, но amp-bind выглядит идеально, если проверить документы и пример здесь: https://ampbyexample.com/playground/#url=https://ampbyexample.com/components/amp-bind/source/ - person Chris Leather; 01.11.2018