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>

如果您想探索其他选项，此SO post提到了绑定。 amp-bind通过数据绑定和表达式添加自定义交互。

Answer 2

有一个“胡子倒置部分”的解决方案，但由于涉及其他因素，因此在我的情况下不起作用。

在[AMP Issues支持页面] [2]上，我感谢[Cathy Zhu] [1]。

我会提供它，以防对某人有帮助：

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

] }

AMP：在选择框中预先选择的值

2 个答案: