AMP: предварительно выбранное значение в поле выбора

Question

Какое решение иметь предварительно выбранное значение в приведенном ниже примере? Допустим, третий вариант должен быть выбран по умолчанию, когда данные извлекаются из JSON и отображается поле выбора (без взаимодействия с пользователем).

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
    <option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>

Answer 1

Самый простой способ - это добавить selected атрибут в тегах параметров, чтобы сделать его по умолчанию.

<option selected value="{{url}}">{{title}}</option>

Если вы хотите изучить другие варианты, в этом посте упоминается обязательность. amp-bind добавляет пользовательскую интерактивность с привязкой данных и выражениями.

Answer 2

Существует решение с "перевернутыми усами", но оно не работает в моем случае из-за других факторов.

Я получил это благодаря [Cathy Zhu][1] на странице поддержки AMP Issues][2].

Я предоставлю это, если это будет полезно для кого-то:

<amp-selector>
<amp-list width="auto" height="200"
  layout="fixed-height"
  src="//amp-list-selector.glitch.me/api/amp-list-data.json">
  <template type="amp-mustache">
    {{#selected}}
    // content displayed if selected is true
    <div class="story-entry"  selected>
      <amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
    </div>
    {{/selected}}
    {{^selected}}
     // content displayed if selected is false
    <div class="story-entry">
      <amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
    </div>
    {{/selected}}
  </template>
</amp-list>

для образца данных:

{

"items": [{"title": "Cat", "imageUrl": " https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n", "selected": true},

{
  "title": "Dog",
  "imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
  "selected": false
},
{
  "title": "Mouse",
  "imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
  "selected": false
},

{
  "title": "Fish",
  "imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
  "selected": false
}

]}