客户端过滤

简介

这是一个展示如何实现客户端过滤的示例。

设置

此外，必须在头部导入使用的 AMP 组件。我们使用 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-mustache 来呈现数据。

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

客户端过滤器

可以通过使用 amp-list、amp-state 和 amp-bind 来实现客户端过滤。

amp-state 最初使用来自端点的数据进行设置，该端点返回可用产品的列表；用户可以选择不同的颜色，并且该选择将变量 filteredProducts 设置为过滤器表达式的结果。过滤器表达式是一个 amp-bind 表达式，它使用 Array.filter 函数。

然后，filteredProducts 变量用作 amp-list 的 src。 amp-list 不会自动调整大小，但是可以通过使用 amp-bind 来计算过滤状态下的高度：这里我们将 [height] 绑定到 filteredProducts 数组的长度乘以单个元素的高度。

此方法的替代方法是使用服务器端过滤，我们在产品示例中对此进行了说明。

<amp-state id="allProducts" src="/static/samples/json/related_products.json"></amp-state>
<select on="change:AMP.setState({
    filteredProducts: allProducts.items.filter(a => event.value == 'all' ? true : a.color == event.value)
  })">
  <option value="all" selected>All</option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="yellow">yellow</option>
  <option value="orange">orange</option>
</select>
<amp-list height="282" [height]="(40 + 24) * filteredProducts.length" layout="fixed-height" src="/static/samples/json/related_products.json" [src]="filteredProducts" binding="no">
  <template type="amp-mustache">
    <amp-img src="{{img}}" layout="fixed" width="60" height="40" alt="{{name}}"></amp-img>
    {{name}}
  </template>
</amp-list>

需要进一步解释？

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

转到 Stack Overflow

一个无法解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但也欢迎您针对您特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @sebastianbenz 编写