Question

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

我一直在使用AMP by Example网站上的“产品浏览页面”示例作为我的指导方针（Product Browse Page）。然而，我似乎无法将我的数据过滤掉。我希望当我从选择菜单中选择“轮式装载机”时，我的库存清单中的项目将会消失。

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

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

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

GitHub Link to Code

Answer 1

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

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

1 个答案: