基于AMP的库存列表数据过滤功能故障排查

Hey Craig, let’s work through this AMP inventory filtering issue together—I’ve sorted out similar problems with AMP’s data-binding system before, so let’s break down what might be going wrong and how to fix it.

Core Components You’ll Need #

First, make sure you’ve got the right AMP components imported in your <head>—these are non-negotiable for filtering:

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

Step 1: Set Up Your Inventory State #

Whether you’re pulling data from an API or embedding it directly, use amp-state to store your inventory data so amp-bind can manipulate it. Here’s a static example:

<amp-state id="inventoryData">
  <script type="application/json">
    {
      "items": [
        {"id": 1, "category": "Wheel Loader", "name": "Compact Loader X1", "price": "$48,000"},
        {"id": 2, "category": "Excavator", "name": "Mini Digger Z3", "price": "$32,000"},
        {"id": 3, "category": "Wheel Loader", "name": "Heavy-Duty Pro 700", "price": "$115,000"}
      ]
    }
  </script>
</amp-state>

Pro tip: Double-check that your category values (like "Wheel Loader") match exactly what’s in your filter options—even a stray space will break the match.

Step 2: Add a Filter Control #

Use a dropdown or amp-selector to let users pick the "Wheel Loader" category. Here’s a simple dropdown that updates the filter state:

<select 
  on="change:AMP.setState({activeFilter: event.target.value})"
  class="filter-control"
>
  <option value="">All Inventory</option>
  <option value="Wheel Loader">Wheel Loader</option>
  <!-- Add other categories here -->
</select>

If you prefer button-style filters, amp-selector works great too:

<amp-selector 
  on="select:AMP.setState({activeFilter: event.targetOption})"
  layout="container"
>
  <div option="" selected>All</div>
  <div option="Wheel Loader">Wheel Loader</div>
  <!-- Add other category buttons -->
</amp-selector>

Step 3: Bind the Filtered Data to Your amp-list #

This is where the magic happens—use amp-bind to dynamically filter the items rendered in your amp-list. The key is the [items] attribute, which overrides the default items when the filter changes:

<amp-list 
  layout="fixed-height" 
  height="500"
  items="inventoryData.items"
  [items]="inventoryData.items.filter(item => !activeFilter || item.category === activeFilter)"
>
  <template type="amp-mustache">
    <div class="inventory-card">
      <h3>{{name}}</h3>
      <p>Category: {{category}}</p>
      <p class="price">{{price}}</p>
    </div>
  </template>
</amp-list>

Note: If you’re pulling data from an external API instead of amp-state, you can bind the src attribute to a filtered API endpoint (e.g., [src]="'/api/inventory?category=' + activeFilter"), but make sure your API supports CORS and returns valid JSON.

Common Fixes for Failed Filtering #

• Missing Component Imports: Double-check that amp-bind, amp-list, and amp-mustache are all loaded—missing one will break the whole system.
• Mismatched Values: Ensure the category name in your filter option (e.g., "Wheel Loader") is identical to the category field in your inventory data (no capitalization differences, extra spaces, etc.).
• State Initialization: If your filter isn’t working on first load, make sure activeFilter is initialized. You can add a default state in amp-state:

  <amp-state id="filterState">
    <script type="application/json">{"activeFilter": ""}</script>
  </amp-state>
  

  Then reference filterState.activeFilter instead of activeFilter in your bindings.

Give these steps a try—when users select "Wheel Loader", your amp-list should automatically update to show only matching items. Let me know if you hit any snags with specific parts of your code!

内容的提问来源于stack exchange，提问作者Craig Scott