1

我正在构建 AMP 结构中的库存列表，因为我们网站的其余部分是使用 AMP 构建的，并且需要能够过滤我的一些数据以实现可用性。这是我目前正在处理的内容的链接：库存清单。

我一直在使用 AMP by Example 网站上的产品浏览页面示例作为我如何进行此操作的指南（产品浏览页面）。但是，我似乎根本无法过滤我的数据。我希望当我从选择菜单中选择“轮式装载机”时，我的库存列表中的项目会消失。

这是我设置“机器类型”选择菜单的初始代码块，我还有两个过滤层，我目前已经注释掉了，因为我试图让这个过滤器工作。

     <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>

对我可能遗漏的内容有任何见解，以便实际过滤我更改选择菜单的数据吗？我假设这是对我的 JSON 数据中的“类型”项目的引用问题，但我不确定如何建立该连接。

编辑：2018 年 5 月 16 日

终于让它工作了。决定暂时放弃“模型”，但稍后会为其添加功能。

GitHub 代码链接

4

1 回答 1

1

看起来过滤需要根据提供的类型参数在服务器/API 端进行。当类型更改并且在 URL 中正确设置类型时，在库存列表链接上发生提取调用，但是当我测试它时它为两种类型返回相同的 JSON。它的 AMP 位在我看来是正确的。

于 2018-05-03T15:27:11.030 回答