AMP: предварительно выбранное значение в поле выбора - PullRequest
Новая
       26

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

0 голосов
/ 20 ноября 2018

Какое решение иметь предварительно выбранное значение в приведенном ниже примере? Допустим, третий вариант должен быть выбран по умолчанию, когда данные извлекаются из 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>

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

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

Я получил это благодаря [Cathy Zhu] [1], на [странице поддержки вопросов AMP] [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>

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

{

"предметы": [ { "title": "Cat", "imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n", "выбранный": правда }, 

{
  "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
}

] }

0 голосов
/ 21 ноября 2018

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

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

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

...