限制重复选择

简介

这是一个示例，展示如何在 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