AMP-LIST не отображает элементы при начальной загрузке при использовании фильтра на стороне клиента - PullRequest
0 голосов
/ 28 ноября 2018

Я пытаюсь реализовать фильтрацию на стороне клиента, выполнив this doc
Но проблема, с которой я сталкиваюсь, заключается в том, что при начальной загрузке страницы список пуст (amp-list незаполнить список из удаленного URL), но когда я начинаю набирать какой-то запрос, функциональность работает как положено.

Ниже приведены фрагменты из моей реализации:

<amp-state id="citiesList" src="//.../citiesList.json"></amp-state>

<input on="input-debounced:AMP.setState({filteredCities: citiesList.items.filter(a => event.value=='' ? true : a.name.toLowerCase().indexOf(event.value.toLowerCase())>=0)})">

<amp-list [src]="filteredCities" src="//.../citiesList.json" layout="fixed-height" height="350" [height]="(48)*filteredCities.length">
    <template type="amp-mustache">
        <li>
            <span>{{name}}</span>
        </li>
    </template>
        <div overflow class="list-overflow"></div>
</amp-list>

И в консоли я могусм. предупреждение, относящееся к этому:

Default value (//.../citiesList.json) does not match first result (null) for <AMP-LIST [src]="filteredCities">. We recommend writing expressions with matching default values, but this can be safely ignored if intentional.

Еще одна вещь, на которую следует обратить внимание, это то, что поле ввода отображается при нажатии раскрывающейся кнопки.

1 Ответ

0 голосов
/ 28 ноября 2018

Я должен исправить это, написав следующий код на моей кнопке выбора:

<button on="tap:AMP.setState({filteredCities: citiesList.items})" tabindex="0">

Но я уверен, что это лучший способ сделать это.

...