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

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

0 голосов
/ 02 мая 2018

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

1 Ответ

0 голосов
/ 03 мая 2018

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

...