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

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

0 голосов
/ 31 октября 2018

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

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

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

1 Ответ

0 голосов
/ 31 октября 2018

Возможно, вы захотите использовать комбинацию 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>

Body 

<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>
...