限制重复选择

简介

这是一个示例，展示如何限制在 amp-list 中重复选择项目。它结合使用 amp-selector 和 amp-bind 来检查某个项目当前是否在列表（由 fruits 列表填充）中。

如果您选择的水果已经在 fruits 列表中，则 fruits 列表不会更改。

如果您选择的水果不在 fruits 列表中，则会将其添加到列表末尾。

<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
  <title>Restrict Duplicate Selection</title>
  <link rel="canonical" href="https://amp.org.cn/documentation/examples/interactivity-dynamic-content/restrict_duplicate_selection/index.html">
  <meta name="viewport" content="width=device-width">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

设置

导入 amp-bind 组件以保存选定的水果

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

导入 amp-list 组件以导入要从中选择的水果列表

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

导入 amp-selector 组件，以便用户可以选择水果

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

如果将 amp-selector 与 amp-list 一起使用，则需要 amp-mustache 组件

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

实现

我们使用 amp-state 元素创建一个初始为空的列表，但一旦用户选择水果，它就会更新。用户从 amp-list 元素（从 fruits.json 文件导入）中选择水果。

每次用户尝试选择水果时，amp-selector 元素都会验证水果是否已在 fruits 列表中。如果水果不在列表中，amp-selector 将使用末尾的新水果更改 fruits 列表的状态。如果水果在 fruit-selected 列表中，则该列表保持不变。

从列表中挑选您最喜欢的水果
您只能向列表中添加新水果，不能多次添加相同的水果。

选择水果！

<amp-state id="fruits">
  <script type="application/json">
    []
  </script>
</amp-state>
<p>
  Pick your favorite fruites from this list <br> You can only add new fruits to the list, you can't add the same fruit
  multiple times.
</p>
<div style="resize: horizontal; overflow: auto;">
  <p [text]="fruits">Select fruits!</p>
</div>
<amp-list src="/static/samples/json/fruits.json" height="242" items="." single-item>
  <template type="amp-mustache">
    <ul>
      <amp-selector on="select:AMP.setState({fruits: fruits.includes(event.targetOption) ? fruits : fruits.concat([event.targetOption])})">
        {{#items}}
          <li option="{{name}}" role="button" tabindex="0">
            {{name}}
          </li>
        {{/items}}
      </amp-selector>
    </ul>
  </template>
</amp-list>

需要进一步解释？

如果本页上的解释没有涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的具体用例。

转到 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的长期参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @elisameyer