如何在AMP页面上将大量数据从WordPress获取到<amp-state>

时间:2019-04-08 14:42:00

标签: wordpress

我需要在有自动建议字段的地方建立AMP页面。用户输入文字时,应显示可用机场列表。

我已经尝试过以下示例:

https://ampbyexample.com/advanced/autosuggest_form/

当我静态设置数据时,一切正常,但是我需要从WordPress查询此数据。但是我需要使用[src]属性,例如:

[src]='/airports_json.json'

但这不起作用。

<amp-state id="departure_list" [src]="<?php echo get_template_directory() . '/airports_json.json';?>">
                            <?php echo file_get_contents( $file_airports_json );?>
                        </amp-state>

                        <label>
                        Departure
                        <input [value]="departure"
                            on="input-debounced: AMP.setState({
                                    filteredDeparture: event.value.length == 0 ?
                                        []:
                                        departure_list.filter(departure =>
                                        departure.toLowerCase().indexOf(event.value.toLowerCase()) >= 0
                                        )
                                })">
                        </label>
                        <amp-selector on="select:AMP.setState({
                                                departure: event.targetOption,
                                                filteredDeparture: []
                                            })"
                        keyboard-select-mode="focus">
                        <amp-list id="auto-suggest"
                            items="."
                            layout="fixed-height"
                            height="0"
                            [src]="filteredDeparture"
                            [height]="filteredDeparture.length * 34">
                            <template type="amp-mustache">
                            <div option="{{.}}">{{.}}</div>
                            </template>
                        </amp-list>
                        </amp-selector>

我希望amp状态会填充src属性中的大数据,但实际上并非如此。我也尝试使用WordPress REST API处理JSON数据,例如

/wp-json/wp/v2/posts

0 个答案:

没有答案