使用 AMP [AMP-STATE] [AMP-BIND] [AMP-MUSTACHE] 过滤 JSON 数据

Question

我正致力于在 AMP 结构中构建库存列表，因为我们网站的其余部分是使用 AMP 构建的，并且需要能够出于可用性目的过滤我的一些数据。这是我目前正在处理的 link：Inventory List.

我一直在使用 AMP by Example 网站上的产品浏览页面示例作为我如何进行此操作的指南 (Product Browse Page)。但是，我似乎根本无法过滤我的数据。我希望当我从 select 菜单中选择 'Wheel Loader' 时，我的清单列表中的项目会消失。

这是我设置 'Machine Type' select 菜单的初始代码块，我还有两层过滤，我目前在尝试使它正常工作时已将其注释掉.

     <amp-state id="inventory">
                <script type="application/json">
                    {
                        "Type": "all",
                        "listSrc": "https://www.craigattachments.com/json/inventory.json?Type=all&_=RANDOM"
                    }
                </script>                
            </amp-state>
            <amp-list height="60" layout="fixed-height" src="https://www.craigattachments.com/json/inv-dropdowns.json">
                <template type="amp-mustache">
                    <label for="Type">Machine Type</label>
                    <select id="Type" name="Type" class="inv-dropdown" on="change:AMP.setState({inventory: {Type: event.value,listSrc: 'https://www.craigattachments.com/json/inventory.json?Type='+ event.value +'&_=RANDOM'}})">
                         <option value="all">Select your machine type</option>
                        {{#type}}
                        <option value="{{name}}">{{name}}</option>
                        {{/type}}
                    </select>
                </template>
            </amp-list>

然后我尝试使用上面的代码来过滤我的列表（如下），该列表是使用我的 inventory.json 文件填充的。我出于测试目的缩短了文件，但最终将通过我们的 ERP 系统填充它 API。

    <amp-list width="auto" height="150" layout="fixed-height" src="https://www.craigattachments.com/json/inventory.json?Type=all&_=RANDOM'" [src]="inventory.listSrc">  
                <template type="amp-mustache">
                    <div class="inv-list-row">
                        <div class="inv-list-item inventory">{{SerialNo_SerialNumber}}</div>
                        <div class="inv-list-item inventory">{{Part_PartNum}}</div>
                        <div class="inv-list-item inventory">{{Part_PartDescription}}</div>
                        <div class="inv-list-item inventory">{{Part_CommercialBrand}}</div>
                        <div class="inv-list-item inventory">{{Part_CommercialSubBrand}}</div>
                        <div class="inv-list-item inventory">{{Type}}</div>
                    </div> 
                </template> 
            </amp-list>

是否了解我可能遗漏的内容，以便这实际上可以根据 select 菜单的更改过滤我的数据？我假设这是我 JSON 数据中 'Type' 项目的引用问题，但我不确定如何建立这种联系。

编辑：2018 年 5 月 16 日

终于成功了。决定暂时放弃 'Model'，但稍后会为其添加功能。

GitHub Link to Code

Answer 1

根据提供的类型参数，过滤似乎需要在 server/API 端发生。当类型更改时，提取调用发生在清单列表 link 中，并且它在 URL 中正确设置了类型，但是当我为两种类型返回相同的 JSON 时测试了它。它的 AMP 部分对我来说很合适。

使用 AMP [AMP-STATE] [AMP-BIND] [AMP-MUSTACHE] 过滤 JSON 数据

Filtering JSON Data with AMP [AMP-STATE] [AMP-BIND] [AMP-MUSTACHE]

json

amp-html

accelerated-mobile-page