用戶端篩選器

簡介

這是一個範例，示範如何實作用戶端篩選器。

設定

此外，必須在標頭中匯入使用的 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