Фильтрация данных JSON с помощью AMP [AMP-STATE] [AMP-BIND] [AMP-MUSTACHE]

Question

Я работаю над созданием инвентарного списка в структуре AMP, поскольку остальная часть нашего сайта построена с использованием AMP, и мне необходимо иметь возможность фильтровать некоторые из моих данных для удобства использования. Вот ссылка на то, над чем я сейчас работаю: Inventory List.

Я использовал пример страницы просмотра продукта на веб-сайте 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. Я сократил файл для целей тестирования, но в конечном итоге он будет заполнен через наш API систем ERP.

    <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, но я не уверен, как сделать это соединение.

---

Изменить: 16 мая 2018

Наконец-то все заработало. Решил отказаться от "Модели" на данный момент, но добавлю функциональность для него позже.

GitHub Ссылка на код

Answer 1

Похоже, что фильтрация должна происходить на стороне сервера /API на основе предоставленного параметра Type. Вызовы выборки происходят по ссылке Inventory List, когда тип изменяется, и он правильно устанавливает тип в URL, но он возвращал одинаковый JSON для обоих типов, когда я тестировал его. AMP немного похоже на меня.